webpack设置版本号和处理成单独的文件

前言：webpack4 开始使用： mini-css-extract-plugin插件, 1-3 的版本可以用： extract-text-webpack-plugin

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

二、安装mini-css-extract-plugin插件

npm install --save-dev mini-css-extract-plugin

三、接下来的 css的处理我们都把mode设置为 production。

module.exports = {
  mode: 'production', //将原来的development修改为production
  entry: './src/index.js',
……

四、 抽取了样式，就不能再用 style-loader注入到 html 中了，所以将原来的style-loader改成MiniCssExtractPlugin.loader,

const path = require('path');
//一、导入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//二、判断是处于什么环境
const devMode = process.env.NODE_ENV !== 'production'; // 判断当前环境是开发环境还是 部署环境，主要是 mode属性的设置值。

module.exports = {
  mode: 'production', //生产环境务必记得修改
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './demo')
  },
  module: {
        rules: [
            {
                //加载css文件
                //test:/\.css$/,
                //use:['style-loader','css-loader'],
                //加载css|sass|scss系列
                //test:/\.(sc|c|sa)ss$/,
                //use:['style-loader','css-loader','sass-loader'],
                //加载css|sass|scss系列并启用source map
                test: /\.(sc|c|sa)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader', options: {
                        sourceMap: true
                    }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true,
                            ident: "postcss",
                            plugins: loader=>[
                                require('autoprefixer')({overrideBrowserslist: ['> 0.15% in CN']})
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader', options: {
                        sourceMap: true
                    }
                    }]
            }
        ],
        //noParse:/jquery|lodash/
    },
// 三、在module后加上插件
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css', // 设置最终输出的文件名
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
    })
  ]
};

image.png

再次运行打包：
在 demo目录中已经把 css 抽取到单独的一个 css 文件中了。修改 html，引入此 css 就能看到结果了。

打包命令会经常使用，这个时候也可以在pack.json文件中增加常用命令

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "npx webpack",
   "demo":"npx webpack --config webpack.production.config.js"
 },