前端必会的webpack(三） 开发环境和生成环境分离 + 管理CSS + 预处理和分离CSS

1-1 开发环境和生成环境分离

我们想把 开发环境和 生产环境 分开
怎么去实现？
1、新建几个文件

2、安装两个插件
1）用来合并 npm install webpack-merge -D
2）用来清理旧的打包文件 npm install clean-webpack-plugin -D

3、
3-1 配置 webpack.common.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const {
   
  NamedModulesPlugin
} = require("webpack");
const {
   
  CleanWebpackPlugin
} = require("clean-webpack-plugin");
module.exports = {
   
  entry: [path.resolve(__dirname, "./src/index.js")],
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
   
      title: "webpacj init",
    }),
  ],
};

3-2   配置 webpack.dev.js

const {
   
  merge
} = require("webpack-merge");
const common = require("./webpack.common");
module.exports