【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理,如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel!!!

webpack系列文章:

生产环境

生产环境的特点是能让代码优化上线运行的环境

我们要做哪些事情呢?

样式经过css-loader的处理被整合在js中,如果样式在js中的话,会让js体积非常大,下载就会慢;

同时因为是先加载js才能通过创建style标签插入到页面中,这里就会出现闪屏现象。

所以,我们就需要将css从js中提取出来;

当然还需要对代码进行压缩和兼容性处理,这里包括html、css和js。

提取 CSS 成单独文件

mini-css-extract-plugin这个插件会将 CSS 提取到单独的文件中

下载这个插件:

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

在配置文件webpack.config.js中引用:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

和开发环境中不同的一点,这里我们会用MiniCssExtractPlugin.loader这个loader取代style-loader

MiniCssExtractPlugin.loader作用:提取js中的css成单独文件。

因为这个loade提取js中的css成单独文件,所以不需要style-loader再创建style标签,放入样式了。

具体的webpack.config.js配置如下:

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: [
      {
        test: /\.css$/,
        use: [
          // 创建style标签,将样式放入
          // 'style-loader', 
          // 这个loader取代style-loader。作用:提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin()
  ],
  mode: 'development'
};

实例项目目录和文件内容:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用当前配置打包运行一下,会发现打包后的build下面多了一个main.css文件
在这里插入图片描述
这个main.css会把我们之前的样式全都加载进来:
在这里插入图片描述

再看index.html,它会自动引入打包生产的资源
在这里插入图片描述
打开build下的index.html,样式正常
在这里插入图片描述
如果我们希望打包后的资源和之前的项目目录结构是一样的,可以在插件使用的地方配置filename属性,重命名即可。

配置如下:

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: [
      {
        test: /\.css$/,
        use: [
          // 创建style标签,将样式放入
          // 'style-loader', 
          // 这个loader取代style-loader。作用:提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};

删掉前面打包的build文件,重新打包运行,可以看到build目录下面多了css目录,以及目录下面被我们重命名的built.css
在这里插入图片描述
因为这样方式加载的样式是通过link标签引入,而不是style标签,所以不会产生闪屏现象;并且css文件和js文件分割开了,js文件体积也没那么大,解析速度也会更好一些。
在这里插入图片描述

CSS 兼容性处理

css兼容性处理需要用到postcss这个库,postcss在webpack中使用需要用到一个postcss-loader和一个插件postcss-preset-env

就是这个东东
在这里插入图片描述
在这里插入图片描述
下载postcss-loaderpostcss-preset-env:

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

有两种使用方式,第一种是使用postcss-loader的默认配置(就是直接把loader名以字符串的形式加到处理css loader的数组里):

  {
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      // 使用loader的默认配置
      'postcss-loader'
    ]
  }

但是现在不能使用默认配置,我们需要修改loader的配置,那就得写成对象的形式,在options属性里修改loader的配置

第二种方式:

   {
     test: /\.css$/,
     use: [
       MiniCssExtractPlugin.loader,
       'css-loader',
       // 使用loader的默认配置
       // 'postcss-loader',
       // 修改loader的配置
       {
         loader: 'postcss-loader',
         options: {
           ident: 'postcss',// 固定写法
           plugins: () => [
             // 使用我们前面下载的postcss插件
             require('postcss-preset-env')()
           ]
         }
       }
     ]
   }

前面的配置里我们在postcss-loader里配置了要使用的插件postcss-preset-env,这个插件的作用是帮postcss找到package.jsonbrowserslist里面的配置,通过配置加载指定的css兼容性样式。

所以我们现在还需要做一步,就是写这个browserslist

package.json里加一个browserslist属性,值为对象,对象里面可以写两个参数,development(代表开发环境配置) 和 production(代表生产环境配置)

具体写法:

  "browserslist": {
	// 开发环境
    "development": [
      "last 1 chrome version",//兼容最近的chrome浏览器版本
      "last 1 firefox version",
      "last 1 safari version"
    ],
    // 生产环境
    "production": [
      ">0.2%",// 大于99.8%的浏览器,基本上全部的浏览器
      "not dead",// 不要已经死的浏览器,比如ie10
      "not op_mini all"// 不要op_mini所有的,因为op_mini早都死完了,所以不要它,而且在国内基本没有人使用这种东西,所以全都不要
    ]
  },

开发环境不需要做太多,兼容一些主要浏览器的调试版本就足够了;但是生产环境就要多写一点,具体看上面生产环境配置

更多的配置大家可以去github搜关键字browserslist,上面有一个仓库,里面详细介绍了我们可以在browserslist写哪些参数,以及参数详细的配置。

现在验证一下前面的配置靠不靠谱,改动一下样式,添加一些有兼容性问题的样式

  display: flex;
  backface-visibility: hidden;

在这里插入图片描述
postcss-preset-env这个插件默认情况下就是找生产环境配置,也就是说默认使用browserslist里的production配置,跟webpack.config.jswebpack配置里的模式 mode: 'development'是没有关系的。

我们做实例演示,想要变成开发环境,需要设置node环境变量:

// 设置nodejs环境变量
process.env.NODE_ENV = 'development';

css兼容性处理最终配置:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 设置nodejs环境变量
process.env.NODE_ENV = 'development';

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',
          /*
            css兼容性处理:postcss --> postcss-loader postcss-preset-env

            帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式

            "browserslist": {
              // 开发环境 --> 设置node环境变量:process.env.NODE_ENV = development
              "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              // 生产环境:默认是看生产环境
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }
          */
          // 使用loader的默认配置
          // 'postcss-loader',
          // 修改loader的配置
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};

上面的配置修改了环境变量,postcss-preset-env插件会以开发环境的配置做兼容性处理,开发环境只做了主要浏览器最近的版本,我们打包运行实例验证一下,打开build里面的样式代码
在这里插入图片描述
我们发现,它对backface-visibility做了兼容性处理,flex没有做处理

接着我们测试生产环境的兼容性配置,注释掉修改环境变量,没有设置环境变量,默认就是找生产环境:

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';

重新打包运行
在这里插入图片描述
这时候我们发现,生产环境还多了一个dlisplay:-webkit-box;,这个就是做了一个兼容性处理

通过postcss的处理,我们在写样式的时候就不用太过操心兼容性问题,可以把它都交给工具,让工具自动去完成,这样就大大解放了开发人员的一些复杂的操作,只需要考虑最简单的东西,通过工具帮我们自动做兼容性处理。

压缩 CSS

压缩css需要用到optimize-css-assets-webpack-plugin这个插件

下载插件:

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

这个插件的使用非常简单,引入后直接在plugins中new调用即可

引入插件:

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

plugins中new调用:

// 压缩css
new OptimizeCssAssetsWebpackPlugin()

这个插件只要调用就可以压缩css,内部的默认配置已经足够将css进行压缩了,所以我们不需要再修改它的配置。

具体配置如下:

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')

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';

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: {
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],
  mode: 'development'
};

打包运行,找到build下的css
在这里插入图片描述
我们发现css整体已经被压缩成一行了

压缩后的文件体积为204kb
在这里插入图片描述

这里为了对比,我们注释掉插件的调用,关闭css压缩

// 压缩css
// new OptimizeCssAssetsWebpackPlugin()

打包运行查看一下结果

没有压缩构建出的css代码:
在这里插入图片描述
没有压缩构建出的css代码体积:
在这里插入图片描述
没有压缩的的css体积大小为273kb,前面压缩后的是204kb,这个压缩的还是比较少的,因为样式不多,总共才14行代码,所以压缩的效果不是特别明显,实际开发中的样式会非常多,那时css压缩后的体积就会非常小,效果很明显。css文件越小,请求速度就会越快,加载速度就会越快,用户看到的效果也会更快一些,用户体验就会更好。所以我们在上线之前一定要给代码压缩

JS 语法检查 eslint

语法检查最常用的工具就是eslint,在webpack中对应的要使用eslint-loader,这个loader依赖eslint这个库,也需要下载

语法检查js文件:

test: /\.js$/,

注意:只检查自己写的源代码,第三方的库是不用检查的,排除node_modules

exclude: /node_modules/,
 /*
   语法检查: eslint-loader  eslint
     注意:只检查自己写的源代码,第三方的库是不用检查的
 */
 {
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'eslint-loader',
   options: {}
 }

设置检查规则,在package.jsoneslintConfig中设置

语法检查规则推荐使用airbnb规则,为什么呢?

我们打开github,在探索中找到JavaScript这个主题,下面就是js最受欢迎的仓库了
在这里插入图片描述
这里可以看到排名第二的是vuejs
在这里插入图片描述
第三个是facebook的react
在这里插入图片描述
第四个是bootstrap
在这里插入图片描述
第五个是一本书:你不知道的js
在这里插入图片描述
第六个就是我们推荐的airbnb这个风格指南
在这里插入图片描述
airbnb这个风格指南详细的介绍了我们应该怎么写js代码,不应该怎么写js代码,是一个很优秀的库。

我们现在要把这个库应用在eslint上,搜索npm,搜eslint,可以看到一个插件: eslint-config-airbnb,这个就是让airbnb风格指南在eslint中生效在这里插入图片描述
airbnb有 eslint-config-airbnbeslint-config-airbnb-base两个插件,其中 eslint-config-airbnb会包含react的风格建议,我们现在不写react代码,所以不用这个插件,用eslint-config-airbnb-base

在这里插入图片描述
eslint-config-airbnb-base插件又有两个版本,eslint-config-airbnb-base(支持ECMAScript 6+)和eslint-config-airbnb-base/legacy(仅支持ES5及以下),看到legacy(遗产,传统)这个词了吧,我们当然要使用支持ECMAScript 6+的eslint-config-airbnb-base版本啦,从下面的图片能看到我们还需要下载eslinteslint-plugin-import这两个库
在这里插入图片描述
在这里插入图片描述
下载需要的库和插件:

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

package.json里的eslintConfig中设置检查规则:

找到package.json,在里面加一个字段叫eslintConfig,值为一个对象,通过extends来继承airbnb-base就OK了。

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

在这里插入图片描述

如果要指定配置文件中的环境,请使用env键,并通过设置每个环境来指定要启用的环境true。例如,以下启用浏览器和Node.js环境:

{
    "env": {
        "browser": true,
        "node": true
    }
}

或者在一个package.json文件中

{
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

配置eslint语法检查后,运行项目会发现后很多代码不规范的,我们一个个去修复会很麻烦,所以我们在配置的时候可以再加一个选项:fix: true,自动修复eslint的错误,不用我们手动去改

 {
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'eslint-loader',
   options: {
     // 自动修复eslint的错误
     fix: true
   }
 }

如果我们在代码里使用console,eslint也会发出警告:不建议使用console
在这里插入图片描述
但是我们是为了调试,这里就可以忽略这个规则,有一个选项叫// eslint-disable-next-line,就是下一行eslint所有规则都失效(下一行不进行eslint检查)
在这里插入图片描述
写法就是在需要忽略的代码上面写一行// eslint-disable-next-line,跟注释的写法一样

这样重新打包运行就不会再有警告了。

最终配置:

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
          注意:只检查自己写的源代码,第三方的库是不用检查的
          设置检查规则:
            package.json中eslintConfig中设置~
              "eslintConfig": {
                "extends": "airbnb-base"
              }
            airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint
      */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

package.json

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

JS 兼容性处理bable、core-js

先做个测试,写一些es6的语法

const add = (x, y) => {
  return x + y;
};
console.log(add(2, 5));

在这里插入图片描述
使用webpack的内置配置看一下效果

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: []
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

打包运行后,看built.js
在这里插入图片描述
可以发现webpack的内置配置是没有做兼容性处理的,正常我们打开chrome浏览器是没有问题的,输出结果是正常的
在这里插入图片描述

但是要注意,一旦我们打开ie浏览器就会报语法错误,因为它根本不认识这些语法
在这里插入图片描述
所以我们就必然需要做兼容性处理

做兼容性处理需要用到bable,在webpack中对应使用bable-loader,使用时我们需要做具体的配置,有一个参数叫presets预设:指示babel做怎么样的兼容性处理,默认情况下我们会传入'@babel/preset-env',这样相当于做一个预设环境的兼容性处理,一个非常基本的兼容性处理

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        // 预设:指示babel做怎么样的兼容性处理
        presets: ['@babel/preset-env']
    }
}

下载需要的插件:

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

以上面的兼容性配置打包运行,打开built.js
在这里插入图片描述
我们发现此时的es6语法已经做了兼容性处理

刷新查看ie浏览器效果
在这里插入图片描述
结果打印出来了,正常显示。此时我们已经有了基本的兼容性处理。

为什么说只是有了基本的兼容性处理呢?是因为在开发过程中的兼容性问题不止上面这些,比如说我们写一个Promise,上面的配置能够处理吗?
在这里插入图片描述
以前面的配置打包运行,查看built.js
在这里插入图片描述
看到这个Promise还是原封不动的promise,只有有箭头函数做了兼容性处理(基础的兼容性配置做的处理)

刷新查看ie浏览器效果
在这里插入图片描述
ie浏览器报错:promise未定义

总结这种方法:

基本的js兼容性处理 --> @babel/preset-env,存在的问题:只能转换基本语法,如promise高级语法不能转换

所以我们就要解决这个兼容性问题

第二种解决方法:做全部js兼容性处理 --> @babel/polyfill

下载@babel/polyfill这个库

npm i @babel/polyfill -D

这个不是bable插件,下载之后只需引入即可

比如直接在js代码里用import引入

import '@babel/polyfill';

在这里插入图片描述
引入后我们再来构建一次

刷新ie浏览器,查看效果,可以发现ie浏览器正常运行打印了
在这里插入图片描述
下面我们看这第二种做全部兼容性处理的方法有什么问题:

之前构建的代码体积为4kb
在这里插入图片描述
现在我们通过import '@babel/polyfill',引入这个库后打包的代码体积为441kb
在这里插入图片描述
查看built.js可以发现,里面包含了各式各样的兼容性处理,总结一下就是,@babel/polyfill这个库会把js全部的兼容性处理纳进来,不管你做什么兼容性,它一次性全部搞定

相当于我饿了,只需要吃一顿饭,它却把一年内的粮食都运进来

@babel/polyfill是怎么做的呢?其实它就是把那些浏览器不识别的方法,全部定义好,直接挂载在对应的顶层对象上,这样不管它识不识别你都可以直接用了。所以这种是一种相对比较暴力的解决方式。

总结第二种方法:

全部js兼容性处理 --> @babel/polyfill ,存在的问题:我只要解决部分兼容性问题,但是将所有兼容性代码全部引入,体积太大了~

第三种解决方法:需要做兼容性处理的就做:按需加载 --> core-js

下载core-js:

npm i core-js -D

配置core-js
在这里插入图片描述
如上图,我们稍微改动一下presets参数的写法,给'@babel/preset-env'的数组外再套个数组 (改成双层数组),在下面写相应的配置:

{
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'babel-loader',
   options: {
     // 预设:指示babel做怎么样的兼容性处理
     presets: [
       [
         '@babel/preset-env',
         {
           // 按需加载
           useBuiltIns: 'usage',
           // 指定core-js版本
           corejs: {
             version: 3
           },
           // 指定兼容性做到哪个版本浏览器
           targets: {
             chrome: '60',
             firefox: '60',
             ie: '9',
             safari: '10',
             edge: '17'
           }
         }
       ]
     ]
   }
}

上面就是我们第三种方案的配置,要注意,使用第三种方案就不能再使用第二种方案,所以要把前面引入的import '@babel/polyfill';注释掉:

// import '@babel/polyfill';

再次打包运行,我们发现代码的体积更小了,只有104kb
在这里插入图片描述
总结一下

js兼容性处理:babel-loader @babel/core

  1. 基本js兼容性处理 --> @babel/preset-env
    问题:只能转换基本语法,如promise高级语法不能转换
  2. 全部js兼容性处理 --> @babel/polyfill
    问题:我只要解决部分兼容性问题,但是将所有兼容性代码全部引入,体积太大了~
  3. 需要做兼容性处理的就做:按需加载 --> core-js

js兼容性处理的最终配置(按需加载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')
  },
  module: {
    rules: [
      /*
        js兼容性处理:babel-loader @babel/core 
          1. 基本js兼容性处理 --> @babel/preset-env
            问题:只能转换基本语法,如promise高级语法不能转换
          2. 全部js兼容性处理 --> @babel/polyfill  
            问题:我只要解决部分兼容性问题,但是将所有兼容性代码全部引入,体积太大了~
          3. 需要做兼容性处理的就做:按需加载  --> core-js
      */  
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设:指示babel做怎么样的兼容性处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定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'
};

压缩 JS

js压缩非常简单,只需要把mode改为production,即生产环境下webpack会自动压缩代码。

生产环境下webpack会加载一些不一样的配置,加载了很多插件,其中UglifyJsPlugin这个插件就会去压缩js代码,所以我们就不需要自己去写插件了,webpack内部已经实现好了
在这里插入图片描述
我们用一个最基础的webpack配置,修改mode改为production,测试一下效果




  mode: 'production'
};

实例项目的js代码:

const add = (x, y) => {
  return x + y;
};
console.log(add(2, 5));

const promise = new Promise(resolve => {
  setTimeout(() => {
    console.log('定时器执行完了~');
    resolve();
  }, 1000);
});

console.log(promise);

打包运行后的built.js代码:
在这里插入图片描述
可以看到代码已经压缩成一行了,js压缩搞定

压缩 HTML

前面我们给css和js都做了兼容性处理,html要不要做兼容性处理呢?答案是不需要,html是没办法做兼容性处理的,它的标签认识就是认识,不认识就是不认识,所以html是不需要做兼容性处理的。我们只需要对html代码进行压缩。

通过HtmlWebpackPlugin对html代码进行压缩,HtmlWebpackPlugin插件配置中有一个选项叫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')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

生产环境配置总结——一个完整的开发环境配置

1.代码复用

前面css文件做的配置,对于less文件我们也需要做:

{
    test: /\.less$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            // 还需要在package.json中定义browserslist
            loader: 'postcss-loader',
            options: {
                ident: 'postcss',
                plugins: () => [require('postcss-preset-env')()]
            }
        },
        'less-loader'
    ]
},

可以发现对less文件使用的后三个loader,css文件也使用了,所以这里我们就可以复用一下

提取公用的loader:

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

用扩展运算符展开:

  {
    test: /\.css$/,
    use: [...commonCssLoader]
  },
  {
    test: /\.less$/,
    use: [...commonCssLoader, 'less-loader']
  },

这样就不用去写太多重复代码,代码更加精简一些。

2.指定loader执行的先后顺序

正常来讲,一个文件只能被一个loader处理。当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序。

对于js文件loader执行的先后顺序:先执行eslint 在执行babel

通过对loader设置enforce属性指定该loader优先执行:

// 优先执行
enforce: 'pre',
  /*
    正常来讲,一个文件只能被一个loader处理。
    当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序:
      先执行eslint 在执行babel
  */
  {
    // 在package.json中eslintConfig --> airbnb
    test: /\.js$/,
    exclude: /node_modules/,
    // 优先执行
    enforce: 'pre',
    loader: 'eslint-loader',
    options: {
      fix: true
    }
  },
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      presets: [
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'usage',
            corejs: {version: 3},
            targets: {
              chrome: '60',
              firefox: '50'
            }
          }
        ]
      ]
    }
  },

3.一个完整的生产环境配置

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 = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('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']
      },
      /*
        正常来讲,一个文件只能被一个loader处理。
        当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序:
          先执行eslint 在执行babel
      */
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        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',
          esModule: 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'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

参考

  • https://www.bilibili.com/video/BV1e7411j7T5?p=15&spm_id_from=pageDriver
  • 1
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

圆圆01

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值