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

README.md

插件记录

多页面应用 匹配入口文件
  • 使用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-loaderautoprefixer

    {
    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的语法