项目搭建过程中需要处理的几点

1.js的处理：转换ES6代码，解决浏览器兼容问题

用 babel 转换 ES6 代码

用 babel 转换 ES6 代码需要使用到 babel-loader ，我们需要安装一系列的依赖：

npm i babel-core babel-loader babel-preset-env --save-dev

然后在根目录新建一个babel配置文件 .babelrc：

{
        "presets": [
            "env"
        ]
    }

什么是babel

如何将配置用于webpack打包中?

• 在webpack的配置文件webpack.config.js中进行配置
• npm scripts 中使用 --module-bind

1. 修改配置文件

module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    }

2修改npm scripts

  "scripts": {
      "dev": "webpack --mode development --module-bind js=babel-loader",
      "build": "webpack --mode production --module-bind js=babel-loader"
    }

使用 babel-polyfill 解决兼容性问题

babel-polyfill
浏览器会不支持一些语法的使用，导致兼容性问题

npm i babel-polyfill babel-plugin-transform-runtime --save-dev

.babelrc 添加配置：

{
    "presets": [
        "env"
    ],
    "plugins": [
       "transform-runtime"
    ]
}

最后在 webpack.config.js 中将 babel-polyfill 加到你的 entry 数组中：

const path = require('path');
module.exports = {
    entry: [
        "babel-polyfill",
        path.join(__dirname, './src/index.js')
    ],
    // ...
};

2.css的处理：编译css，自动添加前缀，抽取css到独立文件

• postcss-loader
  https://blog.csdn.net/keader01/article/details/73029482

• mini-css-extract-plugin
  postcss-loader 用于添加浏览器前缀，在根目录新建 postcss.config.js 配置
  安装依赖

npm i mini-css-extract-plugin css-loader --save-dev
npm i style-loader postcss-loader  --save-dev

webpack.config.js配置

    // webpack.config.js
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    module.exports = (env, argv) => {
      const devMode = argv.mode !== 'production'
      return {
        module: {
          rules: [
            // ...,
            {
                test: /\.css$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            ]
          },
          plugins: [
            // ...,
            new MiniCssExtractPlugin({
              filename: "[name].css",
              chunkFilename: "[id].css"
            })
          ]
      }
    }

postcss.config.js 配置

module.exports = {
        plugins: {
            autoprefixer: {}
        }
    }

3.html的处理：复制并压缩html文件

html-webpack-plugin
https://www.jb51.net/article/133357.htm

安装依赖

npm i html-webpack-plugin html-loader --save-dev

webpack.config.js配置

const HtmlWebPackPlugin = require("html-webpack-plugin");
    module.exports = {
        module: {
            rules: [
                // ...,
                {
                    test: /\.html$/,
                    use: [{
                        loader: "html-loader",
                        options: {
                            minimize: true
                        }
                    }]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./src/index.html",
                filename: "./index.html"
            })
        ]
    };

4.dist的清理： 打包前清理源目录文件

每次打包，都会生成项目的静态资源，随着某些文件的增删，我们的 dist 目录下可能产生一些不再使用的静态资源，webpack并不会自动判断哪些是需要的资源，为了不让这些旧文件也部署到生产环境上占用空间，所以在 webpack 打包前最好能清理 dist 目录。
安装依赖clean-webpack-plugin
https://www.cnblogs.com/xiaozhumaopao/p/10792168.html

npm install clean-webpack-plugin --save-dev

  const CleanWebpackPlugin = require('clean-webpack-plugin');
  module.exports = {
    plugins: [
      new CleanWebpackPlugin(['dist']),
    ]
  };

5.assets的处理：静态资源处理

安装依赖

npm install file-loader --save-dev

webpack.config.js

module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'file-loader',
                options: {}
              }
            ]
          }
        ]
      }
    }

6.server的启用：development 模式下启动服务器并实时刷新

https://blog.csdn.net/weixin_43684713/article/details/92839419

安装依赖

npm i webpack-dev-server --save-dev

package.json

"scripts": {
      "start": "webpack-dev-server --mode development --open",
      "build": "webpack --mode production"
    }