摘要：
（1）优化resolve.extensions配置 在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在。 在配置 resolve.extensions 时你需要遵守以下几点，以做到尽可能的优化构建性能： l 后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀 阅读全文
摘要：
1. 处理效果 当我们修改带hash的文件并进行打包时，每打包一次就会生成一个新的文件，而旧的文件并没有删除。 为了解决这种情况，我们可以使用clean-webpack-plugin在打包之前将文件先清除，之后再打包出最新的文件 2. 安装 npm install --save-dev clean- 阅读全文
摘要：
1. 处理效果 2. 安装(下载) npm install --save-dev copy-webpack-plugin 3. 配置config文件 引入插件： Plugins设置 阅读全文
摘要：
2.optimize-css-assets-webpack-plugin插件 （1）安装（下载） npm install --save-dev optimize-css-assets-webpack-plugin （2）配置config文件 引入插件： Plugins设置 assetNameRegE 阅读全文
摘要：
（1）处理效果 处理后 （2）安装loader 安装postcss-loader和autoprefixer 下载： npm install --save-dev postcss-loader autoprefixer （3）配置loader 需要和autoprefixer一起用 阅读全文
摘要：
目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具 转换 babel转化语法 阅读全文
摘要：
1. 简单了解 开发环境和生产环境的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载或热模块替换能力 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，以及资源的优化，以改善加载时间。所以我们通常建议为每个环境编写彼此独立的 web 阅读全文
摘要：
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。 webpack-dev-server 主要提供两个功能： （1）为静态文件提供服务 （2）自动刷新和热替换(HMR) 2.安装webpack-de 阅读全文
摘要：
HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。 根据src下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html里 2.安装依赖 npm insta 阅读全文
摘要：
1. 入口entry （1）单入口 单文件： 例如： entry：‘./src/index.js’ 多文件： 在你想要多个依赖文件一起注入，并且将它们的依赖导向到一个“chunk”时，传入数组的方式就很有用。 例如： （2）多入口 例如： 2. 出口output （1）单出口 （2）多出口 [nam 阅读全文
摘要：
（1）安装loader 下载安装file-loader npm install --save-dev file-loader （2）配置config文件 （3）选项配置 配置options： name：为你的文件配置自定义文件名模板（默认值[hash].[ext]） context：配置自定义文件的 阅读全文
摘要：
Sourcemap是为了解决实际运行代码（打包后的）出现问题时无法定位到开发环境中的源代码的问题。 devtool选项 5个基本类型： (1) eval 每个模块都使用 eval() 执行，每一个模块后会增加sourceURL来关联模块处理前后的对应关系。如下图 由于会映射到转换后的代码，而不是映射 阅读全文
摘要：
处理效果 将所有的入口 chunk(entry chunks)中引用的 css，移动到独立分离的 CSS 文件 2.ExtractTextPlugin插件 （1）安装（下载） npm install --save-dev extract-text-webpack-plugin@next （2）配置c 阅读全文
摘要：
1．Less （1）处理效果 （2）安装loader 安装less-loader和less 下载： npm install less-loader less --save-dev （2）配置loader 代码： 2．Sass （1）处理效果 （2）安装loader 安装sass-loader和nod 阅读全文
摘要：
1. 处理效果 未使用loader时，会出现路径错误，图片不显示的情况 经过loader处理后，图片能正常显示 2. 安装 cnpm install --save-dev html-loader 3. 配置config文件 Rules中配置 阅读全文
摘要：
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。 2.安装loader 安装 阅读全文