webpack配置

1. 入口配置entry（必填）

   //webpack.config.js
   module.exports = {
       ……
       //多入口；推荐使用对象写法
       //entry: ['./app.js','./app2.js'], 
       entry: {
           app: './app.js',
           app2: './app2.js'
       }
       ……
   }

2. 出口配置output(必填):

   //webpack.config.js
   module.exports = {
       ……
       output: {
           path: __dirname+'/dist', //使用绝对路径
           filename: "[name].[hash:4].bundle.js" //名称格式：入口name.4位hash.bundle.js
       }
       ……
   }

3. 打包模式mode(webpack4后的版本必填)：

   //webpack.config.js
   module.exports = {
       ……
       mode:"development", //none,development,production(生产模式做代码压缩，开发模式不做代码压缩)
       ……
   }

4. loader配置处module(非必填)：

   
   安装loader：npm install babel-loader @babel/core --save-dev
   安装preset: npm install @babel/preset-env --save-dev

   //webpack.config.js
   module.exports = {
       ……
     module: {
       rules: [
         {
           test: /\.js$/,
           // loader: 'babel-loader' 这个写法只能写字符串
           // use: ['babel-loader','css-loader'] 这个写法读取顺序从右向左
           use: {
             loader: 'babel-loader',
             //设置babel编译规则，preset=>@babel/preset-env
             //每个loader都有对应的options配置项
             options: {
               presets: [
                 [
                   '@babel/preset-env',
                   {
                     targets: {
                       browsers: ['>1%', 'last 2 version', 'not ie<=8']
                     }
                   }
                 ]
               ]
             }
           }
         }
       ]
     }
       ……
   }

   可以将options的value部分写成json格式保存为.babelrc文件中

5. 插件配置plugins(非必填）：
   举例1：配置eslint
   安装eslint: npm install eslint eslint-webpack-plugin --save-dev

   //webpack.config.js
   const eslintplugin = require('eslint-webpack-plugin')
   module.exports = {
       ……
         plugins:[
               new eslintplugin()
           ]
       ……
   }

   配置.eslintrc.js文件：
   
    
6. optimization代码分割:

   optimization: {
       splitChunks: {
         chunks: 'all', //all:全部；async:只判断异步引用；initial:只判断同步引用
         // minChunks: 2, //该包被引用最低次数
         // minSize: 0, //分包的最低大小要求
         cacheGroups: {
           vendor: {
             //第三方插件或工具库的代码分割
             test: /[\\/]node_modules[\\/]/,
             filename: 'vendor.js',
             chunks: 'all',
             minChunks: 1
           },
           common: {
             //通用模块的代码分割
             filename: 'common.js',
             chunks: 'all',
             minChunks: 2,
             minSize: 0
           }
         }
       },
       runtimeChunk: {
         //打包运行时代码分割
         name: 'runtime'
       }
     }

7. 处理css/less文件（module中配置）
   css-loader style-loader less-loader:处理css或less文件
   css-minimizer-webpack-plugin：解析成额外css文件
   mini-css-extract-plugin：压缩css文件代码

   const miniCss = require('mini-css-extract-plugin')
   const cssminizer = require('css-minimizer-webpack-plugin')
   ……
         {
           test: /\.css$/,
           use: [miniCss.loader, 'css-loader']
         },
         {
           test: /\.less$/,
           use: [miniCss.loader, 'css-loader', 'less-loader']
         }
       ]
     },
     plugins: [
       new miniCss({
         filename: 'test.bundle.css'
       }),
       new cssminizer()
     ],
   ……

   其他资源文件解析：
   file-loader url-loader:后者基于前者
   注意：需要引入资源文件并使用，否则不会解析
   webpack4写法：（webpack5兼容这个写法）

   module: {
       rules: [
         ……
         {
           test: /\.(jpg|jpeg|png|gif|svg)$/,
           loader: 'url-loader',
           options: {
             limit: 5000000, //大小限制，超出这个大小的资源不解析成base64
             name: '[name].[hash].[ext]'
           }
         },
         {
           test: /\.mp3$/,
           loader: 'url-loader',
           options: {
             limit: 5000,
             name: '[name].[hash].ext'
           }
         }
       ]
     },

   webpack5自带解析资源文件的写法：
    

   {
           test: /\.(jpg|jpeg|png|gif|svg)$/,
           type: 'asset',
           parser: {
             dataUrlCondition: {
               maxSize: 50000
             }
           },
           generator: {
             filename: '[name].[hash].[ext]'
           }

8. html解析（plugins中）：
   html-webpack-plugin:插件配置、多入口文件需要配置多html就重复new对象进行配置

   
     plugins: [
       new miniCss({
         filename: 'test.bundle.css'
       }),
       new cssminizer(),
       new htmlwebpackplugin({
         template: './index.html',
         filename: 'index.html',
         chunks: ['app'],
         minify: {
           collapseWhitespace: false,
           removeComments: false
         },
         inject: 'body'
       }),
       new htmlwebpackplugin({
         template: './index2.html', //使用的html模板
         filename: 'index2.html', //生成的文件名
         chunks: ['app2'], //使用那个入口文件
         title: 'index2',
         arr: [{ title: 'item1' }, { title: 'item2' }, { title: 'item3' }],
         minify: {
           collapseWhitespace: true, //去掉空格
           removeComments: false //index.html内容的格式，去除备注
         },
         inject: 'body' //script插入位置：body-在body后面、head-在head内
       })
     ],

   html中的动态生成title或其它内容：(jsp写法)
   需要在模板中进行动态写入

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title><%= htmlWebpackPlugin.options.title %></title>
     </head>
     <body>
       <% htmlWebpackPlugin.options.arr.forEach(function(item){ %>
         <div>
           <%= item.title %>
           <div>
       <%})%>
       
             <div id="app2"></div>
     </body>
   </html>
   

   优化打包速度：
   创建webpack.dll.js文件，将第三方库作打包记录，只在第一次打包的时候会打包，后面的打包不再重新打包这些第三方库，
   执行：npm run dll(生成[name]-minifest.json文件)
   npm run build
   以下是webpack.dll.js文件

   //你先去把一些 第三方库打包-》后续打包的时候不去打包这第三方
   //用来提前打包一些第三方库
   //vue-cli webpack4 webpack-cli 3.3.12
   const path = require('path')
   const webpack = require('webpack')
   
   // dll文件存放的目录
   const dllPath = 'public/vendor'
   module.exports = {
     mode: 'production',
     entry: {
       // 需要提取的库文件
       vendor: ['vue', 'vuex', 'vue-router', 'echarts']
     },
     //js
     output: {
       path: path.join(__dirname, dllPath),
       filename: '[name].dll.js', //vendor.dll.js
       // vendor.dll.js中暴露出的全局变量名
       // 保持与 webpack.DllPlugin 中名称一致
   
       library: '[name]_[hash]'
     },
     plugins: [
       //json
       // manifest.json 描述动态链接库包含了哪些内容
       new webpack.DllPlugin({
         path: path.join(__dirname, dllPath, '[name]-manifest.json'),
         // 保持与 output.library 中名称一致
         name: '[name]_[hash]',
         context: process.cwd(),
         format: true //保存文件内容是否格式化
       })
     ]
   }
   

   vue.config.js文件：

   const webpack = require('webpack')
   module.exports = {
     configureWebpack: (config) => {
       config.devtool = 'none'
   ……
       return {
         plugins: [
           new webpack.DllReferencePlugin({
             context: process.cwd(),
             manifest: require('./public/vendor/vendor-manifest.json')
           })
         ]
       }
   ……
   

   package.json
   
   scripts:{
       "dll":"webpack --config webpack.dll.js"
   }