hujiahua/webpack-learing

Ingen beskrivning

胡家华 d2ec14da1e 树摇算法		5 år sedan
common	d2ec14da1e 树摇算法	5 år sedan
src	d2ec14da1e 树摇算法	5 år sedan
.babelrc	b24607b133 通用多文件打包	5 år sedan
.gitignore	b24607b133 通用多文件打包	5 år sedan
README.md	d2ec14da1e 树摇算法	5 år sedan
package.json	d2ec14da1e 树摇算法	5 år sedan
webpack.dev.js	d2ec14da1e 树摇算法	5 år sedan
webpack.prod.js	d2ec14da1e 树摇算法	5 år sedan
yarn.lock	b24607b133 通用多文件打包	5 år sedan

插件记录

多页面应用匹配入口文件

使用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优化

压缩cssOptimizeCSSAssetsPlugin，需要用到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模板页引入内联资源

// 静态资源导入
<script type="text/javascript">
// 静态资源导入
${require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js')}
</script>

<head>
  <!-- 静态资源导入 -->
  ${require('raw-loader!./meta.html')}
</head>

文件指纹 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的语法

README.md