webpack

每天积累一点
最新文章

Angular CLI：配置webpack热模块替换hmr（Hot Module Replacement）

热模块替换（Hot Module Replacement）是Webpack的特性，它可以让我们在调试时不需要重新构建就可以更新代码到正在运行的应用。Angular CLI需要做一些设置就可以使用webpack的热模块替换功能。添加依赖hrm依赖于@angularclass/hmr，安装@angularclass/hmr到dev-dependency$ npm

2017.10.21 03:05

Angular CLI：解决webpack-dev-server报错Invalid Host Header

Angular cli底层是使用webpack，webpack默认会对访问的主机进行检测，这是为了防止主机受到DNS重新绑定攻击。解决方法根据运行的脚本不同分为两种情况解决。一、angular cli脚本如果是使用angular cli的脚本ng serve启动服务器，可以使用--disable-host-check解决。ng serve 

2017.10.26 07:16

使用webpack构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil

2018.01.03 10:08

基于webpack的vue项目使用别名避免../深路径

在vue的项目里，我们可以使用../这样的相对路径的方式引用不同目录的组件：import userinfo from '../../../components/userinfo.vue'; 使用../引用的路径比较深，定位路径和书写不方便，并且不直观。由于项目是基于webpack，比较好的做法是使用webpack对路径定义一个别名。在webpack.base.config.js找到resolve节

2018.01.08 12:20

初识parcel

webpack是一个很好的web应用打包工具，但是使用webpack需要很多繁琐的配置。parcel则提供了一个零配置的方案，大大简化了使用web应用的工具的难度。Parcel特性Parcel有以下一些特性：1、相比于Webpack, Rollup以及Browserify，Parcel打包时间极快这是Parcel做的一个基准测试，基于一个合理大小的应用，包含1726个模块， 6

2018.01.21 09:45

使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。初始化项目创建一个空文件夹demo，使用npm在空文件夹初始化项目。npm init npm install --save-dev webpack npm install --save-dev types

2018.02.23 15:50

webpack编译打包scss

依赖webpack编译scss需要用到这几个loader：style-loader，css-loader，postcss-loader，sass-loader以及插件：extract-text-webpack-plugin安装相关loader和插件：npm install style-loader css-loader postcss-loader 

2018.02.27 08:33

Webpack 4警告：WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

Webpack 4新增了mode选项，它用来表示构建代码的两种默认情况：开发与产品。下面这两个值分别代表了这两种情况：development：开发模式，webpack会默认配置常用于开发的参数，如输出运行时的错误信息等production：产品模式，webpack会默认配置常用语产品构建的餐宿，如压缩代码等使用这两种模式的默认配置，用户可以实现零配置。mode选项可以在webpack.c

2018.03.10 06:42

angular cli配置路径别名替代webpack alias的方案

Angular cli内部是基于webpack实现构建项目：默认是没有webpack的配置文件webpack.config.js。部分与webpack相关的配置可以在.angular-ci.json中设置。如果需要定制的webpack.config.js，则需要使用eject命令发射出webpack.config.jswebpack alias可以让我们对路径设置别名，在模块之间引用是使用的是绝对

2018.04.25 01:58

webpack初步理解

Webpack 是一个非常强大且有趣的工具，它被视为当今许多 Web 开发人员用来构建其应用程序的基础组件。然而，许多人会认为使用它是一个相当大的挑战，主要是因为它的复杂性。 webpack bundle过程图表modules模块是一个文件的升级版本。一个模块，一旦创建并且构建之后，除了包含原始的文件代码之外，还有一些其他有意义的信息：比如模块使用的加载器，模块的依赖项，模块的导出(如果

2022.05.28 08:58

揭秘 webpack 的“导入”功能：使用动态参数

揭秘 webpack 的“导入”功能：使用动态参数在本文中，我们将学习揭开 webpack 的“导入”功能迷雾：使用动态参数。虽然是 webpack 的一个热门卖点功能，但是导入功能有很多隐藏的细节和特性，很多开发者可能都不知道。例如，导入函数可以接受动态表达式，能够实现一些众所周知的特性，比如延迟加载等。您可以将动态表达式视为不是原始字符串（例如 import('./path/to/file.j

2022.09.07 06:10

BabelJS - 将 ES6 模块转换为 ES5

BabelJS - 将 ES6 模块转换为 ES5在本文中，我们将看到如何使用 Babel 将 ES6 模块转换为 ES5。Modules考虑需要重用部分 JavaScript 代码的场景。 ES6 用模块的概念来拯救你。一个模块只不过是写在一个文件中的一段 JavaScript 代码。模块中的函数或变量不可用，除非模块文件导出它们。简单来说，这些模块帮助您在模块中编写代码，并且只公开应该由代码的

2022.09.05 03:52

Webpack 或 Browserify & Gulp：哪个更好？

Webpack 或 Browserify & Gulp：哪个更好？随着 Web 应用程序变得越来越复杂，使您的 Web 应用程序可扩展变得至关重要。过去编写ad-hot时候， JavaScript 和 jQuery 就足够了，而如今构建 Web 应用程序需要更高程度的纪律原则和正式的软件开发实践，例如：1、单元测试以确保对代码的修改不会破坏现有功能。2、Linting 以确保一致的编码风格

2022.09.07 05:25

BabelJS - 使用 Babel 和 Webpack

BabelJS - 使用 Babel 和 WebpackWebpack 是一个模块打包器，它将所有具有依赖关系的模块——js、样式、图像等打包成静态资产 .js、.css、.jpg、.png 等。Webpack 带有预设，有助于编译成需要的形式。例如，有助于以 react 形式获得最终输出的 react 预设，有助于在 ES5 或 6 或 7 中编译代码的 es2015 或 env 预设等。我们在

2022.09.15 06:17