webpack5笔记1. 启动 When setting useBuiltIns: 'usage', polyfills

一、使用webpack-dev-server

1. 启动

"scripts": { "start": "npx webpack serve" },

2.静态资源配置

devServer:{
    // contentBase: path.join(__dirname, 'dist'),
    contentBase: './',
    open:true,
    port:9000
  },

output:{
    // publicPath:'./',
    filename:'[name][hash].js',
    path:path.resolve(__dirname,'dist'),
    clean:true
  }

因为在开发阶段我们一般不会去打包public、images等静态资源目录,只有在上线前才会去将其打包,所以在这里配置一下，如果output中配置了publicPath属性，一定要注释掉publicPath，不然会加载不出图片等静态资源

3.不自动刷新

devServer:{
    // contentBase: path.join(__dirname, 'dist'),
    contentBase: './',
    open:true,
    port:9000,
    // hot:true,
    // hotOnly:true
  },
  target: process.env.NODE_ENV === 'production' ? 'browserslist' : 'web',

target 要改成web

二、@babel/polyfill

1、配置usage时

注意不用全局引用 import "@babel/polyfill";

会报以下警告： When setting useBuiltIns: 'usage', polyfills are automatically imported when needed. Please remove the direct import of @babel/polyfill or use useBuiltIns: 'entry' instead.

若出现如下警告：微信截图_20210408105545.png

解决

npm install --save core-js@3

rules里代码如下：

{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [['@babel/preset-env', {
          "corejs": "3",
          "useBuiltIns": "usage",
        }]]
      }
    }

2、关于babel-plugin-transform-runtime

若业务代码，用presets，用库项目代码，用plugin-transform-runtime（这是闭包形式，不存在全局污染）

参考地址：www.babeljs.cn/docs/babel-…

{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        // presets: [['@babel/preset-env', {
        //   "targets": {
        //     "edge": "17",
        //     "firefox": "60",
        //     "chrome": "67",
        //     "safari": "11.1"
        //   },
        //   "corejs": "3",
        //   "useBuiltIns": "usage",
        // }]]
        "plugins": [
          [
            "@babel/plugin-transform-runtime",
            {
              "absoluteRuntime": false,
              "corejs": 3,
              "helpers": true,
              "regenerator": true,
              "version": "7.0.0-beta.0"
            }
          ]
        ]
      
      }
    }

三、tree shaking

只支持ES Module

在production 环境下，不用的方法不会打包进去

module.exports = {
  mode: "production",
 }

若是development环境下，增加如下代码,但是不会用的方法会被打包进去

module.exports = {
    optimization: {
        usedExports: true
    }
}

不想被tree shaking的部分，添加到package.json里的sideEffects中

比如：sideEffects：['@babel/polyfill']

如果 sideEffects：false 放入package.json 样式会有点影响会有点副作用，因为：

四、code Splitting

    splitChunks:{
      chunks:'all'   //code split 代码分割
    }
  }

webpack5笔记