11. webpack生产环境和开发环境中的配置文件

(一) 开发环境

webpack.config.js文件

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin}  = require("clean-webpack-plugin")


module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: path.resolve(__dirname, 'bulid')
    },
    module: {
        rules: [
            //处理css文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            //处理less文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            //处理css中的图片文件
            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    outputPath: 'imgs/',
                    name: '[hash:8].[ext]',
                }
            },
            //处理html文件中的图片文件
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
            //处理其他文件
            {
                exclude: /\.(js|css|less|png|jpe?g|gif|html)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'css/',
                }
            }
        ]
    },
    plugins: [
        //以自己的html为模板
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify:false
        }),
        //清理构建后的文件夹
        new CleanWebpackPlugin()
    ]
}

(二) 生产环境

1. webpack.config.js文件

   const path = require('path');
   
   //使用自己的模板文件
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   //将css从js文件中抽离
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   //css压缩
   const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
   
   
   // 定义nodejs环境变量：决定使用browserslist的哪个环境
   process.env.NODE_ENV = 'production';
   
   //处理css的配置
   const CommonCssLoader = [
       {
           loader:MiniCssExtractPlugin.loader,
           options:{
               //css中图片路径出问题时进行配置
               publicPath: '../',   // 当前的css所在的文件相对于打包后的根路径dist的相对路径
           }
       },
       'css-loader',
       {
           loader: 'postcss-loader', //css兼容处理
           options: {
               ident: 'postcss',
               plugins: () => [require('postcss-preset-env')()]
           }
       }
   ];
   
   module.exports = {
       mode: 'production',
       entry: './src/js/index.js',
       output: {
           filename: 'built.js',
           path: path.resolve(__dirname, 'bulid'),
       },
       module: {
           rules: [
               //处理css文件
               {
                   test: /\.css$/,
                   use: [...CommonCssLoader]
               },
               //处理less文件
               {
                   test: /\.less$/,
                   use: [...CommonCssLoader, 'less-loader']
               },
               //处理css中的图片文件
               {
                   test: /\.(png|gif|jpe?g)$/,
                   loader: "url-loader",
                   options: {
                       limit: 8 * 1024,
                       outputPath: 'imgs/',
                       name: '[name][hash:8].[ext]',
                   }
               },
               //处理html中的文件
               {
                   test: /\.html$/,
                   loader: 'html-loader'
               },
               //处理其他文件
               {
                   exclude: /\.(js|html|css|less|png|gif|jpe?g)$/,
                   loader: 'file-loader',
                   options: {
                       outputPath: 'other/'
                   }
               },
               //js语法检查
               {
                   test: /\.js$/,
                   exclude: /node_modules/,
                   loader: 'eslint-loader',
                   // 相对于balel-loader优先执行
                   enforce: 'pre',
                   options: {
                       //自动修复不符合eslint规则的代码
                       fix: true
                   }
               },
               //js兼容性处理
               {
                   test: /\.js$/,
                   exclude: /node_modules/,
                   loader: 'babel-loader',
                   options: {
                       presets: [
                           [
                               '@babel/preset-env',
                               {
                                   //按需加载
                                   useBuiltIns: 'usage',
                                   //指定core-js版本
                                   corejs: {
                                       version: 3
                                   },
                                   //指定兼容性做到那个版本的浏览器
                                   targets: {
                                       chrome: '60', //兼容版本大于60的chrome浏览器
                                       firefox: '60',
                                       ie: '9',
                                       safari: '10',
                                       edge: '17'
                                   }
                               }
                           ]
                       ]
                   }
               }
           ]
       },
       plugins: [
           new HtmlWebpackPlugin({
               template: './src/index.html',
               minify: false //如果需要压缩html需要这样设置
           }),
           new MiniCssExtractPlugin({
               filename: 'css/built.css', //将css抽离到css文件夹中的built.css文件中
           }),
           new OptimizeCssAssetsWebpackPlugin(),
       ]
   }
   

2. package.json文件

   "browserslist": {
       "development": [
         "last 1 chrome version",
         "last 1 safari version",
         "last 1 firefox version"
       ],
       "production": [
         ">0.2%",
         "not dead",
         "not op_mini all"
       ]
     },
     "eslintConfig": {
       "extends": "airbnb-base"
     }