初始化

1.全局与局部都安装webpack&webpack-cli
2.调用*npm* *init*来初始化package.json
3.创建config文件夹 编写开发（webpack.dev.js）与生产（webpack.prod.js）配置文件

webpack配置文件的使用

const path = require('path');
module.exports = {
mode: 'production',//"production" | "development" | "none"
entry: './src/js/app.js',//入口
output: {
    path: path.resolve(__dirname, '../build'),//输入文件的路径
    filename: 'js/app.js',//输出文件名字
    publicPath:'/build/',
  },
module: {//配置loader
    rules: []
    },
plugins: []
}

在package.json配置webpack执行脚本

"scripts": {
    "build": "webpack --config ./config/webpack.prod.js",
    "start": "webpack-dev-server --config ./config/webpack.dev.js"
  },

css 处理

1.安装css-loader style-loader
```
{
    test: /\.css$/i,
    use: ['style-loader','css-loader'],
 }
```
2.提取css为单独文件
    1.使用mini-css-extract-plugin插件
    2.引入const MiniCssExtractPlugin = require('mini-css-extract-plugin')
     ```
    3.loader配置
    {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader,'css-loader'],
     }
    4.plugin配置
    plugins: [
        new MiniCssExtractPlugin({//css单文件提取
          filename:'/css/index.css'
        }),
       ]
   ```
     5.css兼容问题
         一.npm install --save-dev postcss-loader postcss postcss-preset-env
         二.loader配置
          ```
            {
               test: /\.css$/i,
               use: [
                   MiniCssExtractPlugin.loader,
                   'css-loader',
                   {
                    loader: "postcss-loader",
                    options: {
                      postcssOptions: {
                        plugins: [["postcss-preset-env",],],
                      },
                    },
                  }
               ],
             }
            ```
           三.借鉴vue的css兼容配置
               在package.json中追加browserslist配置项目
               ```
               "browserslist": {
                    "production": [
                      ">0.2%",//兼容市面99.8%的浏览器
                      "not dead",//不兼容废弃的浏览器
                      "not op_mini all",//不兼容 欧鹏迷你全部浏览器
                      "ie 10"//兼容ie10
                    ]
                  }
                ```

html文件处理

1.安装npm install --save-dev html-webpack-plugin
2.引入const HtmlWebpackPlugin = require('html-webpack-plugin');
3.plugin配置
    new HtmlWebpackPlugin({//根据原html生成引入过js的新html
      template:'./src/index.html'//模板位置
    }),
4.tip 会自动引入js 所以源代码不用引入js 需要指定学习模板位置

图片资源的处理

一、样式中的图片处理
    1.安装url-loader
    2.
         {
            test:/\.(png|jpg|gif|bmp)$/i,
            use:{
              loader:'url-loader',
              options:{
                outputPath:'imgs',//配置图片机加工后的位置
                // publicPath:'/build/imgs',
                name:'[hash:5].[ext]',//处理文件长度
                limit: 8*1024 //图片大小小于8kb时候 转为base64
              }
            }
          },
   二、html中的图片处理 
       1.安装 html-loader
       2.
           {
            test: /\.(html)$/,
            use: ['html-loader']
          },

js处理

一.语法转换
    1.安装 npm babel-loader @babel/core @babel/preset-evn
    2.loader配置
        ```
         {
              test: /.m?js$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env']
                }
              }
            }
        ```
二.js兼容性问题处理
    1.安装npm i @babel/polyfill
    2.仅需要在入口js文件引入
        import '@babel/polyfill';

其他媒体资源处理

1.安装 file-loader
2.{
    exclude:/\.(js|less|css|jpg|png|gif|bmp|json)$/i,//排除
    use:{
      loader:'file-loader',
      options:{
        outputPath:'media',//配置媒体文件地址
        name:'[hash:5].[ext]'
      }
    }
  },

所使用的库

 {
    "@babel/core": "^7.20.7",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^8.3.0",
    "css-loader": "^5.2.7",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.2",
    "less": "^4.1.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "optimize-css-assets-webpack-plugin": "^5.0.8",
    "postcss": "^8.4.20",
    "postcss-loader": "^4.3.0",
    "postcss-preset-env": "^6.7.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3"
  }