webpack的基础配置

webpack 基础

• 主要讲述的是webapack的常用方法与项目中遇见的常见问题，自己搭建webpack配置，根据项目的情况进行配置。

webpack.config.js

webpack默认的基础配置入口，真正的项目会根据开发环境自定义不同的入口

---

• npm init -y （初始化page.json，依赖包的管理）
• webpack webpack-cli（webpack的依赖环境）
• @babel/preset-env @babel/core babel-loader （babel解析）
• @babel/preset-react @vue/babel-preset-app（react/vue）
• css-loader style-loader url-loader （css解析，css中图片的解析，url可以设置图片的参数base64打包）
• mini-css-extract-plugin （拆分独立css，与style-loader冲突，用MiniCssExtractPlugin.loader代替）
• postcss-loader （css解析成AST，配合autoprefixer实现css的补全能，支持不同浏览器的配置）
• @babel/plugin-syntax-dynamic-import 动态import插件
• friendly-errors-webpack-plugin 打包提示

{
    loader: 'postcss-loader',
      options: {
         plugins: () => [
           require('autoprefixer') (
            {
              overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
             }
         )
       ]
  }
}

plugins

• VueLoaderPlugin （vue-loader/lib/plugin）（解析.vue文件与vue-loader配合使用）
• HtmlWebapckPlugin（html-webpack-plugin）（非常强的html插件）

new HtmlWebpackPlugin({ // 打包输出HTML
    title: 'Hello World',
    minify: { // 压缩HTML文件
       removeComments: true, // 移除HTML中的注释
       collapseWhitespace: true, // 删除空白符与换行符
       minifyCSS: true// 压缩内联css
    },
    chunks: ['main'], // 入口js
    filename: 'index.html', // 文件名称
    template: path.join(__dirname, '../src/pages/index.html'), // 文件地址
  }),

• OptimizeCssAssetsWebpackPlugin（optimize-css-assets-webpack-plugin）// 压缩css，根据cssnano规则进行压缩

new OptimizeCssAssetsWebpackPlugin({
  assetNameRegExp: /.css$/g,
  cssProcessor: require('cssnano')
}),

• MiniCssExtractPlugin (mini-css-extract-plugin) // 把css拆分单个css文件

new MiniCssExtractPlugin({
   filename: '[name].css'
})

• CleanWebpackPlugin(const { CleanWebpackPlugin } = require('clean-webpack-plugin')) // 清理文件夹

js压缩

• UglifyJsPlugin (uglifyjs-webpack-plugin) // js的代码压缩
  注意：webpack4.X当mode为production时默认开启

optimization: {
    minimizer: [
      new UglifyJsPlugin({
        test: /\.js(\?.*)?$/i,  //测试匹配文件,
        include: /\/includes/, //包含哪些文件
        excluce: /\/excludes/, //不包含哪些文件

        //允许过滤哪些块应该被uglified（默认情况下，所有块都是uglified）。 
        //返回true以uglify块，否则返回false。
        chunkFilter: (chunk) => {
            // `vendor` 模块不压缩
            if (chunk.name === 'vendor') {
              return false;
            }
            return true;
          }
        }),
  
        cache: false,   //是否启用文件缓存，默认缓存在node_modules/.cache/uglifyjs-webpack-plugin.目录
        parallel: true,  //使用多进程并行运行来提高构建速度
    ],
  }

文件指纹

• Hash （和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会改变）
• Chunkhahs （和webpack打包的chunk有关，不同的entry会产生不同的chunkhash值）
• Contenthash（根据文件内容来定义hash，文件内容不变，则contenthash不变）

module.exports = {
  output: {
    // 入口文件多用于chunkhash
    filename: '[name][chunkhash:8].js',
  }，
module: {
  rules: [
    {
        test: /.(png|jpe?g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name][hash:8].[ext]'
            }
          }
        ]
     }
  ]
},
plugins: [
  new MiniCssExtractPlugin({
     // css多用于contenthash，必须采用此插件，才会生成独立文件
     filename: '[name][contenthash].css'
  })
]
}