一、初始化

npm init -y 
npm intall webpack webpack-cli --save-dev

二、增加配置文件

新建一个webpack.config.js的文件

//解决绝对路径问题
const path = require('path')
module.exports = {
  // 配置打包的入口
    entry: './src/zindex.js',
  // 配置打包的出口
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'./dist')
      },
  //配置打包方式
    mode:'none'
}

三、打包的文件自动加载到html文件上

下载插件
npm install html-webpack-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'app.html',
        inject: 'body'
      })
    ]
}

四、清除打包残留的无用文件

    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'./dist'),
        clean:true //设置true
    },

五、调成开发模式，定位错误实际位置

  //配置打包方式 production(生产)/development(开发)
    mode:'development',
    devtool: 'inline-source-map',

六、监听文件变化，实时编译(只能手动刷新浏览器)

webpack --watch

七、实时编译，无需手动刷新浏览器

npm install webpack-dev-server -D

    devServer:{
      static:'./dist'
    }

启一个服务
npx webpack-dev-server

八、资源模块（使用图片等）

asset/resource （会把资源打包成实际一个资源）

    module: {
      rules: [
         {
         //匹配需要打包的资源
           test: /\.(png|jpg|gif)$/i,
           type: 'asset/resource',
           //设置打包位置和打包名字
           generator: {
             filename: 'assets/[contenthash][ext]'
           }
         },
      ]
     },
    //设置打包位置和打包名字还可以在output中设置
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'./dist'),
        clean:true,
        //设置打包位置和打包名字
        assetModuleFilename: 'images/[contenthash][ext]'
    },

asset/inline （会把资源打包成base64的一个dataurl）

    module: {
      rules: [
         {
           test: /\.(png|jpg|gif)$/i,
           type: 'asset/inline'
         },
      ]
     },

asset/source 打包文本

    module: {
      rules: [
         {
          test: /\.(text)$/i,
          type: 'asset/source',
        },
      ]
    },

asset 自动地在 resource 和 inline 之间进行选择，默认小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型

    module: {
      rules: [
         {
          test: /\.(png|jpg|gif)$/i,
          type: 'asset',
          parser: {
             dataUrlCondition: {
               // 设置资源大小 大于4M都按照asset/resource打包
               // 否则按照asset/inline打包
               maxSize: 4*1024*1024
             }
           }
        },
      ]
    },

九、解析css文件和less文件

npm inistall css-loader -D
npm install style-loader -D
npm install less-loader less -D

    module: {
      rules: [
        {
          test: /\.(css|less)$/,
          //有顺序要求  先执行css-loader解析css文件
          //然后使用style-loader把css加载到页面上
          use: ['style-loader','css-loader','less-loader']
        }
      ]
    },

十、合并css文件

npm install mini-css-extract-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'app.html',
        inject: 'body'
      }),
      new MiniCssExtractPlugin()
    ],
    module: {
      rules: [
        {
          test: /\.(css|less)$/,
          //style-loader没有用了
          use: [MiniCssExtractPlugin.loader,'css-loader','less-loader']
        }
      ]
    },

十一、指定打包css路径和文件名

    plugins: [
      new MiniCssExtractPlugin({
        filename:'styles/[contenthash].css'
      })
    ],

十二、压缩css文件

npm install css-minimizer-webpack-plugin -D

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
    mode:'production',
    optimization : {
      minimizer:[
        new CssMinimizerPlugin()
      ]
    }

十三、ES6转换成ES5

babel-loader 在webpack里应用babel解析ES6的桥梁
@babel/core babel核心模块
@babel/preset-env babel预设一组babel插件的集合

npm install babel-loader @babel/core @babel/preset-env -D

module: {
      rules: [
       {
          test: /\.js$/,
          //过滤node_modules中的js文件
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options:{
              presets:['@babel/preset-env']
            }
          }
        }
      ]
}

如果 js文件用了async/await
打包过后会出现这样的一个错误

Uncaught ReferenceError: regeneratorRuntime is not defined

npm install @babel/runtime -D
npm install @babel/plugin-transform-runtime -D

   {
     test: /\.js$/,
     exclude: /node_modules/,
     use: {
       loader: 'babel-loader',
       options:{
         presets:['@babel/preset-env'],
         plugins: [
           [
             '@babel/plugin-transform-runtime'
           ]
         ]
       }
     }
   }