#### 插件记录 ##### 多页面应用 匹配入口文件 - 使用`glob`插件，`glob.sync(path.join(__dirname ,"./src/*/index.js"))`方法会匹配`src`目录下 所有等文件夹中等index.js入口文件(开发按照约定，入口文件为`index.js`) ##### 设置打包后到模板页以及注入js，css等 `HtmlWebpackPlugin` ``` new HtmlWebpackPlugin({ template: path.join(__dirname, `src/${pageName}/index.html`), filename: `${pageName}.html`, chunks: [pageName], inject: true, // 注入css/js minify: { // 模板格式设置 html5:true, collapseWhitespace: true , preserveLicenseComments: false , minifyJS: true , minifyCSS: true, removeComments: true, } }) ``` ##### 支持react，jsx，es6/7新特性 - 需要使用 `@babel/core @babel/preset-react @babel/preset-env babel-loader` - 需要新建`.babelrc`文件且加入 `{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }` ##### js优化 > webpack 4 版本自带了`UglifyJsPlugin`插件，会对js进行压缩 ##### css优化 - 压缩css`OptimizeCSSAssetsPlugin`，需要用到`cssnano`库 ``` new OptimizeCSSAssetsPlugin({ // 压缩css assetNameRegExp: /\.css$/g, cssProcessor: require('cssnano') }), ``` > 如果`module.rules`中使用了`style-loader css-loader less-loader`此时会将css压缩至css中 可通过`MiniCssExtractPlugin`生成单独css文件 - css自动补全前缀`postcss-loader`和`autoprefixer` ``` { loader: 'postcss-loader', options: { plugins: () => [ require('autoprefixer')({ // 自动补全 overrideBrowserslist:["last 2 version", ">1%", 'ios 7'], }) ] } } ``` - 移动端rem单位转换`px2rem-loader`，同时通过`raw-loader`包内联静态资源文件引入`node_modules/lib-flexible/flexible.js`(需下载`lib-flexible`库，且需要安装到正式环境到依赖`yarn add lib-flexible -S`) ``` { loader: "px2rem-loader", options: { remUnit: 75, // 1rem = 75px remPrecesion: 8, // px转换rem到小数位 } } ``` - 在`index.html`模板页引入内联资源 ``` // 静态资源导入 ``` ``` ${require('raw-loader!./meta.html')} ``` ##### 文件指纹 hash,chunkhash,contenthash - hash > 一旦文件改变，重新打包将会导致整个项目hash改变，整个项目的缓存将失效 - chunkhash > 根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值,在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。 > **但是这样又有一个问题，因为我们是将样式作为模块import到JavaScript文件中的，所以它们的chunkhash是一致的** - contenthash > contenthash是针对文件内容级别的，只有你自己模块的内容变了，那么hash值才改变 解决办法： 对入口文件使用`chunkhash`,对css文件使用`contenthash`,**如果对css使用文件指纹，需要取消使用`style-loader`,因为前者是生成hash css文件，后者是将css打入html中** ``` output: { path: path.join(__dirname, 'dist'), filename: '[name]_[chunkhash:8].js' // chunkhash }, ``` ``` plugins:[ new MiniCssExtractPlugin({ filename: '[name]_[contenthash:8].css' // contenthash }) ] ``` ``` module: { rules:[ { test: /.less$/, use:[ // 'style-loader',// 将css插入到html style标签，如果要使用contenthash生成css文件，需要注释 MiniCssExtractPlugin.loader , 'css-loader', 'less-loader' ] } ] } ``` ##### 文件压缩 - `url-loader` ``` rules: [ { test: /\.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { limit: 8192, // 限制大小 }, }], }, ] ``` ##### source-map 开发环境开启，线上关闭 配置详见：[webpack devtool](https://www.webpackjs.com/configuration/devtool/) ##### 辅助工具 - `CleanWebpackPlugin` 构建完成之前删除dist目录 ``` plugins:[ new CleanWebpackPlugin() ] ``` ##### 基础库分离 - 使用`SplitChunksPlugin`插件将`React React-dom`通过CDN引入 - `chunks` 参数说明 - async 只分离异步引入的库 - initial 只分离同步引入的库 - all 分离引入的库 配置详见： [split-chunks-plugin/](https://www.webpackjs.com/plugins/split-chunks-plugin/#optimization-splitchunks) ``` plugins:[ optimization : { splitChunks: { cacheGroups: { commons: { test: /(react|react-dom)/, name: "vendors", chunks: 'all' } } } } 或者 optimization : { splitChunks: { minSize: 0, // 引用的模块大小， cacheGroups: { commons: { // test: /(react|react-dom)/, name: "commons", chunks: 'all', minChunks: 3, // 最少引用了两次 } } } } ``` ##### 摇树优化 一个模块有多个方法，只要引用了一个方法，这个文件都会被打包到bundle中，`tree shaking`就是只把引用了到方法打入bundle中，没用到的方法会在`uglify`阶段去除掉 - 使用： `webpack`默认支持,在`mode:production`的情况下默认开启,在`.babelrc`文件中设置`modules:false`即可 - 要求 必须是`es6`的语法