webpack入门3-----生产环境配置

比眉伴天荒 2022-08-30 01:48 229阅读 0赞

下方的配置文件均为webpack.config.js文件

在配置完成后运行指令均为webpack，可查看打包产生的文件

项目内容上传到了  码云 [https://gitee.com/a2547944268/webpack\_test][https_gitee.com_a2547944268_webpack_test]上，下面的内容对照着代码的话，可能更清晰。

### 1.提取css成单独文件 ###

因为在一般情况下，js内引入的css文件，会被打包进出口js文件内，所以引入在编译的时候会到导致编译文件较大，速度慢的情况

所以将css单独打包出来，可以适当增加文件加载速度

需要下载插件

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

修改配置文件

const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    // 这个插件的作用：提取css成单独文件进行使用
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build'),
      },
      module: {
        rules: [
          // loader的配置
          // css文件是放置在js文件内的，不需要单独文件夹存放
          {
            // 处理css资源
            test: /\.css$/,
            use: [
              // 创建style标签，将样式放入
              // 'style-loader',
    
              // 取代style-loader，提取js中的css成单独文件
              MiniCssExtractPlugin.loader,
              // 将css整合到js文件中
              'css-loader',
            ],
          }
        ],
      },
      plugins: [
        // plugins的配置
        new HtmlWebpackPlugin({
          template: './src/index.html',
        }),
        new MiniCssExtractPlugin({
          // 对输出的css文件进行重命名
          filename: 'css/built.css',
        }),
      ],
      mode: 'development',
    };

其中，使用mini-css-extract-plugin达将css提取出来的目的。

### 2.css兼容性处理 ###

处理css的兼容性问题，需要的是postcss-loader

安装文件

npm install --save-dev postcss-loader postcss-preset-env

const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    
    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build'),
      },
      module: {
        rules: [
          {
            // 处理css资源
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: ['postcss-preset-env'],
                  },
                },
              },
            ],
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html',
        }),
        new MiniCssExtractPlugin({
          filename: 'css/built.css',
        }),
      ],
    };

同时还需要修改package.json文件

"browserslist": {
    	// 开发环境  --》设置node环境变量：process.env.NODE_ENV = "development"
    	"development": [
    	"last 1 chrome version",
    	"last 1 firefox version",
    	"last 1 safari version"
    	],
    	// 生产环境
    	"production": [
    	">0.2%",
    	"no dead",
    	"not_op_mini all"
    	]
    }

运行指令：webpack

### 3.压缩css ###

压缩css文件，需要安装   optimize-css-assets-webpack-plugin

npm install --save-dev optimize-css-assets-webpack-plugin

配置

const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
    
    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build'),
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
    
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: ['postcss-preset-env'],
                  },
                },
              },
            ],
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html',
        }),
        new MiniCssExtractPlugin({
          filename: 'css/built.css',
        }),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin(),
      ],
      mode: 'development',
    };

### 4.js语法检查 ###

使用的是eslint'

npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

配置

const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
    
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build'),
      },
      module: {
        rules: [
          // 需要安装 eslint-loader  eslint eslint-config-airbnb-base eslint-plugin-import
          /*
                    语法检查： eslint-loader  eslint
                    注意：只检查自己写的代码，第三方的库不进行检查
                    设置检查规则：
                        package.json中eslintConfig中设置
                        airbnb --> eslint-config-airbnb-base eslint eslint-plugin-import
                        //airbnb 规则
                */
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'eslint-loader',
            options: {
              // 自动修复exslint错误
              fix: true,
            },
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html',
        }),
      ],
      mode: 'development',
    };

配置package.json

"eslintConfig": {
        "extends": "airbnb-base",
        "env": {
          "browser": true
        }
      },

运行webpack，产生build文件即可。

### 5.js兼容性处理 ###

安装babel-loader等

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

配置

const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
    
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build'),
        environment: {
          arrowFunction: false,
        },
      },
      module: {
        rules: [
          /*
                js兼容性处理:babel-loader
                    需要下载三个包：babel-loader @babel/core  @babel/preset-env
    
                    下面是解决方案：
                    1.基本js兼容性处理 ---> @babel/preset-env
                       问题：只能转换基本语法，如promise不能转换
    
                    2.全部js兼容性处理 ---> @babel/polyfill
                       需要下载：@babel/polyfill
                       下载完成后在源代码内引入即可 import  上述的三个东西不需要引入（可以将文件内的es6的东西全部转换）
                       问题：如果只需要解决部分兼容性问题，但是所有的兼容性代码全部引入，体积太大
                    3.需要做兼容性处理的就做：按需加载 ---> core-js
                       需要下载：core-js
    
                    注：在使用第三个方案的时候，不能同时使用第二种方案
                */
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              // 预设：指示babel做怎样的兼容性处理
              presets: [
                [
                  '@babel/preset-env',
                  {
                    // 按需加载  第三种处理方式
                    useBuiltIns: 'usage', // 使用视频内的东西报错，更换之后编译正常
                    // useBuiltIns: 'entry',
                    // 指定core-js版本
                    corejs: {
                      version: 3,
                    },
                    // 指定兼容性做到哪个版本浏览器
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17',
                    },
                  },
                ],
              ],
            },
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html',
        }),
      ],
      mode: 'development',
    };

### 6.js压缩 ###

模式为生产环境下会自动压缩js代码

### 7.html压缩 ###

配置

直接在html-webpack-plugin插件内添加属性  minify  进行压缩配置

// html不需要做兼容性处理
    const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
    
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build'),
        environment: {
          arrowFunction: false,
        },
      },
      plugins: [
        // 直接通过HtmlWebpackPlugin进行压缩
        new HtmlWebpackPlugin({
          template: './src/index.html',
          // 压缩html代码
          minify: {
            // 移除空格
            collapseWhitespace: true,
            // 移除注释
            removeComments: true,
          },
        }),
      ],
      mode: 'production',
    };

### 生产环境配置汇总 ###

const { resolve } = require('path');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    // 这里默认使用生产环境，所以需要配置开发环境
    // 定义nodejs环境变量：决定使用browserslist的哪个环境变量
    process.env.NODE_ENV = 'development';
    
    // 复用loader
    const commonCssLoader = [
      // 这种写法会将css代码直接整合到js内
      // 'style-loader',
      // 下面的写法是将编译后的css文件提取出来
      MiniCssExtractPlugin.loader, // 将css代码提取为单独css文件
      'css-loader', // 编译css代码
      {
        // css兼容性处理
        // 还需要在package.json中定义browserslist
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            plugins: ['postcss-preset-env'],
          },
        },
      },
    ];
    
    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build'),
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              ...commonCssLoader,
            ],
          },
          {
            test: /\.less$/,
            use: [
              ...commonCssLoader,
              'less-loader', // 将less编译成css
            ],
          },
          /*
                  正常来讲，一个文件只能被一个loader处理
                  当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：先执行eslint 再执行babel
                  原因：eslint是检查语法错误的，而babel是将es6语法转换为es5语法，如果先使用了babel，在eslint内可能会报错
                */
          {
            // 需要在package.json中eslintConfig --> airbnb
            test: /\.js$/,
            exclude: /node_modules/,
            // 优先执行
            enforce: 'pre',
            loader: eslint - loader,
            options: {
              fix: true, // 自动修复js内的报错
            },
          },
          // js的压缩是：将mode设置为production会自动压缩
          {
            // js的兼容性处理
            test: /\.js$/,
            exclude: /node_modules/,
            loader: babel - loader,
            options: {
              presets: [
                [
                  '@babel/preset-env', // 全部加载的话很大，可以按需加载
                  {
                    useBuiltins: 'usage',
                    corejs: { version: 3 },
                    targets: {
                      chrome: '60',
                      firefox: '50',
    
                    },
                  },
                ],
              ],
            },
          },
          {
            test: /\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs', // 输出路径
              esModules: false,
            },
          }, {
            test: /\.html$/,
            loader: 'html-loader',
          },
          {
            // 处理其他文件
            exclude: /\.(js|css|less|html|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
              outputPath: 'media',
            },
          },
        ],
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: 'css/built.css',
        }),
        // 压缩css代码
        new OptimizeCssAssetsWebpackPlugin(),
        // 这个可以处理html里的代码，但是html内的图片无法处理
        new HtmlWebpackPlugin({
          template: './src/index.html',
          minify: {
            collapseWhitespace: true,
            removeComments: true,
          },
        }),
    
      ],
      mode: 'production',
    };

这些大体是生产环境需要配置的内容。

[https_gitee.com_a2547944268_webpack_test]: https://gitee.com/a2547944268/webpack_test