1. Devtool sets sourcemap

Devtool Settings soucre – map

devtool: "source-map",
Copy the code

// a map file will appear, which maps source code to bundle files

Level 1: source-map A very detailed mapping of code to bundle code that produces a map file

Level 2: Inline-source-map does not generate map files and is packaged with JS code

Level 3: EVAL Each module is executed using eval(), providing == fast reconstruction speed ==

Level 4: cheap added this keyword, the error is only accurate to the number of rows but not to the number of columns

Level 5: Module added this keyword, third party keyword positioning

Eval: Each module is executed using eval() and // @sourceURL. It is very fast. The main disadvantage is that it does not display the line number correctly because it is mapped to the transformation code rather than the original code (there is no source map from the loader).

2. Eval-source-map: Each module is executed using eval(), and SourceMap is added to eval() as the DataUrl. Initially it is slow, but it provides fast reconstruction speed == and produces real files

2, webpack – dev – server

  devServer: {
    contentBase: './dist'.// Default directory to use
    hot: true.// The CSS does not support contenthash and chunkhash after the hot module update is started. The old version cannot be split by minicss.loader
    hotOnly: true.// Set to true to turn off browser refresh
    clientLogLevel: 'warning'.historyApiFallback: { // This is useful for developing single-page apps, which rely on the HTML5 History API, and if set to true, all jumps will point to
      rewrites: [{from: /. * /,
          to: path.posix.join(config.dev.assetsPublicPath, 'index.html')}}],compress: true.open: true.// Open the browser
    overlay: config.dev.errorOverlay
      ? { warnings: false.errors: true }
      : false.// to display errors on the browser page when compiling errors occur
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
  },
Copy the code

For CSS file modification only

 devServer: {
    hot: true, 
 }
// ....

new webpack.HotModuleReplacementPlugin(),
Copy the code

Modify for JS

DevServer: {hot: true, hotOnly: true, // Set to true to close browser refresh} //... new webpack.HotModuleReplacementPlugin(),Copy the code
if (module.hot) {
  module.hot.accept('Some file imported'.() = >{})}Copy the code

3. About Babel

Support ES6 syntax, compatible with earlier browsers

Simple understanding:

Es6 syntax: arrow function classes, etc

Es6 features: Promise class, etc

Plug-in:

@babel/preset-env // Works on ES6 syntax

@babel/ react // JSX syntax

How do I configure es5 compatible syntax?

Through the Babel – loader

npm i @babel/core babel-loader
Copy the code
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'.options: [
            presets: ['@babel/preset-env'] // The syntax is resolved, but the features are not]}},Copy the code

Also introduce the Polyfill installation into the build dependency

npm i @babel/polyfill
Copy the code

. Babelrc configuration

{
  "presets": [["@babel/preset-env",
      {
        "corejs": 2."useBuiltIns": "usage" // The difference between entry, Usage, and false}}]]Copy the code

Read more:

www.cnblogs.com/amiezhang/p…

www.babeljs.cn/docs/babel-… The official