webpack 基礎(chǔ)

• 主要講述的是webapack的常用方法與項(xiàng)目中遇見的常見問題，自己搭建webpack配置，根據(jù)項(xiàng)目的情況進(jìn)行配置。

webpack.config.js

webpack默認(rèn)的基礎(chǔ)配置入口，真正的項(xiàng)目會(huì)根據(jù)開發(fā)環(huán)境自定義不同的入口

• npm init -y （初始化page.json，依賴包的管理）
• webpack webpack-cli（webpack的依賴環(huán)境）
• @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可以設(shè)置圖片的參數(shù)base64打包）
• mini-css-extract-plugin （拆分獨(dú)立css，與style-loader沖突，用MiniCssExtractPlugin.loader代替）
• postcss-loader （css解析成AST，配合autoprefixer實(shí)現(xiàn)css的補(bǔ)全能，支持不同瀏覽器的配置）
• @babel/plugin-syntax-dynamic-import 動(dòng)態(tài)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）（非常強(qiáng)的html插件）

new HtmlWebpackPlugin({ // 打包輸出HTML
    title: 'Hello World',
    minify: { // 壓縮HTML文件
       removeComments: true, // 移除HTML中的注釋
       collapseWhitespace: true, // 刪除空白符與換行符
       minifyCSS: true// 壓縮內(nèi)聯(lián)css
    },
    chunks: ['main'], // 入口js
    filename: 'index.html', // 文件名稱
    template: path.join(__dirname, '../src/pages/index.html'), // 文件地址
  }),

• OptimizeCssAssetsWebpackPlugin（optimize-css-assets-webpack-plugin）// 壓縮css，根據(jù)cssnano規(guī)則進(jìn)行壓縮

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

• MiniCssExtractPlugin (mini-css-extract-plugin) // 把css拆分單個(gè)css文件

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

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

js壓縮

• UglifyJsPlugin (uglifyjs-webpack-plugin) // js的代碼壓縮
  注意：webpack4.X當(dāng)mode為production時(shí)默認(rèn)開啟

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

        //允許過濾哪些塊應(yīng)該被uglified（默認(rèn)情況下，所有塊都是uglified）。 
        //返回true以u(píng)glify塊，否則返回false。
        chunkFilter: (chunk) => {
            // `vendor` 模塊不壓縮
            if (chunk.name === 'vendor') {
              return false;
            }
            return true;
          }
        }),
  
        cache: false,   //是否啟用文件緩存，默認(rèn)緩存在node_modules/.cache/uglifyjs-webpack-plugin.目錄
        parallel: true,  //使用多進(jìn)程并行運(yùn)行來提高構(gòu)建速度
    ],
  }

文件指紋

• Hash （和整個(gè)項(xiàng)目的構(gòu)建相關(guān)，只要項(xiàng)目文件有修改，整個(gè)項(xiàng)目構(gòu)建的hash值就會(huì)改變）
• Chunkhahs （和webpack打包的chunk有關(guān)，不同的entry會(huì)產(chǎn)生不同的chunkhash值）
• Contenthash（根據(jù)文件內(nèi)容來定義hash，文件內(nèi)容不變，則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，必須采用此插件，才會(huì)生成獨(dú)立文件
     filename: '[name][contenthash].css'
  })
]
}