2021-8-24 Webpack

2021-8-24 Webpack

提取CSS成一个单独的文件

npm i mini-css-extract-plugin --s

const path  = 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: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'
}

CSS兼容性处理

npm i postcss-loader postcss-preset-env --s

webpack.config.js

rules: [
  {
    test: /\.css$/,
    use: [
      //创建style标签，将样式放入
      // 'style-loader',
      //这个loader取代style-loader。作用：提取js中css成单独文件
      MiniCssExtractPlugin.loader,
      //将css文件整合到js文件中
      'css-loader',
      /*
      * css兼容性处理：postcss-->postcss-loader post-css-preset-env
      * 帮助postcss找到package.json中browerslist里面的配置，通过配置加载指定的css兼容性样式
      * */
      //使用loader的默认配置
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            //postcss的插件
            require('postcss-preset-env')
          ]
        }
      }
    ]
  }
]

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%",
    "not dead",
    "not op_mini all"
  ]
}

压缩CSS

npm i optimize-css-assets-webpack-plugin --s

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

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      //对输出的css文件进行重命名
      filename: 'css/built.css'
    }),
      //压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],

js语法检查eslint

npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import --s

webpack.config.js

rules: [
  {
    test: /\.css$/,
    use: [
  /*
  * 语法检查：eslint-loader eslint
  * 注意：只检查自己写的源代码，第三方的库时不用检查的
  * 设置检查规则：
  * package.json中eslintConfig中设置
  * airbnb --> eslint-config-airbnb-base eslint eslint-plugin-import
  * */
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'eslint-loader',
    options: {
      //自动修复eslint的错误
      fix: true,
    }
  }
]

package.json

"eslintConfig": {
  "extends": "airbnb-base"
}

js兼容性处理eslint

1.基本js兼容性处理

npm i babel-loader @babel/core @babel/preset-env --s

rules: [
  /*
  * js兼容性处理：babel-loader @babel/core @babel/preset-env
  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']
    }
  }
]

2.全部js兼容性处理

npm i @babel/polyfill --s

index.js

import '@babel/polyfill'

3.需要做兼容性处理的就做：按需加载

npm i core-js --s

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

压缩html和js

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    //压缩html代码
    minify:{
      //移除空格
      collapseWhitespace:true,
      //移除注释
      removeComments:true
    }
  }),
],

Webpack的优化配置

开发环境性能优化

生产环境性能优化

开发环境性能优化

优化打包构建速度

优化代码调试

生产环境性能优化

优化打包构建速度

优化代码性能

HMR

hot module replacement 热模块替换、模块热替换

作用：一个模块发生改变，只会重新打包这一个模块（而不是打包所有模块）

极大提升构建速度

样式文件：可以使用HMR功能：因为style-loader内部实现了

js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码

注意：HMR功能对js的处理，只能处理非入口js文件的其他文件

html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了

解决：修改entry入口，将html文件引入

entry: ['./src/js/index.js','./src/index.html'],

webpack.config.js

devServer: {
  contentBase: path.resolve(__dirname,'build'),
  compress:true,
  port:3000,
  open:true,
  //开启HMR功能
  //当修改了webpack配置，新配置要想生效，必须重启webpack服务
  hot:true
}

index.js

if (module.hot) {
  //一旦module.hot为true，说明开启了HMR功能。 -->让HMR功能代码生效
  module.hot.accept('./print.js', function () {
    //方法会监听 print.js文件的变化，一旦发生变化，其他默认不会重新打包构建
    //会执行后面的回调函数
    print()
  })
}