简介

鉴于webpack更新太快，总结下基础设置要领，明白有限，仅做举一反三之用。

起步

初始化设置文件 package.json并装置webpack

mkdir webpack-demo && cd webpack-demo
npm init -y    //-y 初始化选项默以为 yes      
npm i webpack webpack-cli -D // -D 即 -save-dev    版本4.x以上须要装置webpack-cli

建立以下目次构造、文件和内容：

webpack-demo
  |- package.json
+ |- /src
+   |- index.js

//index.js
document.write("Hello webpack4!");

建立webpack设置文件

编写开辟环境和临盆环境相互自力的webpack设置文件
先增添三个文件

 webpack-demo
  |- package.json
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
  |- /src
    |- index.js
  |- /node_modules

1.webpack.common.js

用到两个基础的插件

npm i clean-webpack-plugin html-webpack-plugin -D

clean-webpack-plugin：打包时自动消灭输出文件夹中未用到的文件;
html-webpack-plugin：打包时会自动天生index.html并替代已有的index.html，bundle.js也会自行增添到 html 中。

  //webpack.common.js
    const path = require('path');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');  
    const HtmlWebpackPlugin = require('html-webpack-plugin');    
    
    module.exports = {
      entry: './src/index.js',
      plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
          title: 'index'
        })
      ],
      output: {
        filename: 'bundle.js',           
        path: path.resolve(__dirname, 'dist')    //定义输出文件夹dist途径
      }
    };

2.webpack.dev.js

先装置webpack-merge,用以兼并通用设置文件与开辟环境设置文件

npm i webpack-merge -D

装置开辟效劳器devServer,作用是修正代码后及时从新加载（革新浏览器）

npm i webpack-dev-server -D

//webpack.dev.js
  const merge = require('webpack-merge');
  const common = require('./webpack.common.js');
  const webpack = require('webpack');
    
  module.exports = merge(common,{
     devServer: {                //启用开辟效劳器
       contentBase: './dist',   //通知效劳器从哪供应内容，只需在想要供应静态文件时才须要
       compress: true,          //统统效劳都启用gzip 紧缩
       host: '0.0.0.0',         //指定运用一个host，可用ip地点接见，没有的话如果他人接见会被制止。默许localhost。
       port: '9999',            //指定端口号，如省略，默以为”8080“
       hot: true,               //启用模块热替代特征
       inline: true,            //启用内联情势，一段处置惩罚及时重载的剧本被插进去到bundle中，而且构建音讯会出如今浏览器掌握台
       historyApiFallback: true,//开辟单页运用时有效，依靠于HTML5 history API，设为true时一切跳转将指向index.html
     },
     plugins: [
         new webpack.HotModuleReplacementPlugin(),  //webpack内置的热更新插件
     ],
     mode: 'development'
  });

devServer的更多可选参数-https://www.webpackjs.com/con…

HotModuleReplacementPlugin 模块热替代(Hot Module Replacement)插件，用以在运转时更新发作转变的模块，从而无需举行完全革新。

3.webpack.prod.js

一样用’webpack-merge’兼并通用设置文件与临盆环境设置文件

//webpack.prod.js
  const merge = require('webpack-merge');
  const common = require('./webpack.common.js');
    
  module.exports = merge(common,{
    mode: "production"
  });

关于
mode

此时你可以会注重到设置文件中有个mode项，webpack4中新加，作用以下:

• –mode production 临盆环境

  不须要像旧版本一样定义node环境变量
  new webpack.DefinePlugin({"process.env.NODE_ENV":JSON.stringify("production") })

  ps：许多 library 将经由过程与 process.env.NODE_ENV 环境变量关联，以决议 library 中应当援用哪些内容。当运用 process.env.NODE_ENV === 'production' 时，一些 library 可以针对详细用户的环境举行代码优化，从而删除或增添一些主要代码。
  

  自动开启一些插件，如：
  uglifyjs-webpack-plugin js代码紧缩(所以无需再零丁运用)
  NoEmitOnErrorsPlugin 编译失足时跳过输出，以确保输出资本不包括毛病
  ModuleConcatenationPlugin webpack3 增添的作用域提拔(Scope Hoisting)

• –mode development 开辟环境

  自行定义node环境变量为development
  new webpack.DefinePlugin({"process.env.NODE_ENV":JSON.stringify("development") })
  运用 eval 构建 module, 提拔增量构建速率
  自动开启一些插件，如
  NamedModulesPlugin 运用模块热替代(HMR)时会显现模块的相对途径

详细形貌：

启动

在package.json “scripts” 中增添npm剧本，从而快速运转开辟效劳器 | 打包临盆环境代码

//package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3"
  }
}

"start": "webpack-dev-server --open --config webpack.dev.js",

webpack-dev-server    启动开辟效劳器   
--open    翻开浏览器
--config webpack.dev.js    设置运转此剧本时实行的设置文件为webpack.dev.js

"build": "webpack --config webpack.prod.js"

webpack 启动webpack
--config webpack.prod.js   设置运转此剧本时实行的设置文件为webpack.prod.js

实行 npm start

此时应当可以看到 Hello webpack4!

实行 npm run build

项目文件夹中自动天生打包后的文件目次（输出文件夹dist）

 webpack-demo
  |- package.json
  |- webpack.common.js
  |- webpack.dev.js
  |- webpack.prod.js
  |- /src
    |- index.js
  |- /dist 
      | - index.html
      | - app.bundle.js
  |- /node_modules

运用sourcemap

sourcemap 能完成打包后的运转代码与源代码的映照，协助我们debug到原始开辟代码。

///webpack.dev.js
  module.exports = merge(common,{
    devtool: 'cheap-module-eval-source-map',
    ...
  });

大多数时刻开辟环境用’cheap-module-eval-source-map’是最好的挑选，想要完全的功用又不介怀构建速率的话就直接用’source-map’。详细的设置项许多，可以是eval，source-map，cheap，module，inline的恣意组合。
详细每一个参数的作用请查阅官方api：https://webpack.js.org/config…
也可参考这篇文章https://segmentfault.com/a/11… 这里不做详述。

代码星散

把代码星散到差别的 bundle 中，可以按需加载或并行加载这些文件。可用于猎取更小的 bundle，以及掌握资本加载优先级，如果运用合理，会极大影响加载时候。

三种经常使用的代码星散要领：

1.进口出发点：运用 entry 设置手动地星散代码。

先在src文件夹增添一个文件another-module.js

//another-module.js
  import _ from 'lodash';
  console.log(
    _.join(['Another', 'module', 'loaded!'], ' ')
  ); 

修正index.js

//index.js
  import _ from 'lodash';
  console.log(
    _.join(['index', 'module', 'loaded!'], ' ')
  );

用到了lodash，装置下依靠

npm i lodash -S

修正webpack.common.js中entry和output设置

//webpack.common.js
  module.exports = {
    entry: {
      index: './src/index.js',
      another: './src/another-module.js'
    },
    output: {
      filename: '[name].bundle.js',            //依据进口文件名来定义输出文件名
      path: path.resolve(__dirname, 'dist')
    }
};

实行 npm run build

将天生以下构建结果:

Hash: 66f57fffc46778f3b145
Version: webpack 4.16.0
Time: 2966ms
            Asset       Size  Chunks             Chunk Names
another.bundle.js   70.4 KiB       0  [emitted]  another
  index.bundle.js   70.4 KiB       1  [emitted]  index
       index.html  251 bytes          [emitted]  
[1] (webpack)/buildin/module.js 497 bytes {0} {1} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} {1} [built]
[3] ./src/another-module.js 86 bytes {0} [built]
[4] ./src/index.js 83 bytes {1} [built]
    + 1 hidden module
Child html-webpack-plugin for "index.html":
     1 asset
    [0] (webpack)/buildin/module.js 497 bytes {0} [built]
    [1] (webpack)/buildin/global.js 489 bytes {0} [built]
        + 2 hidden modules

存在的题目:

• 如果进口 chunks 之间包括反复的模块，那些反复模块都邑被引入到各个 bundle 中。
• 不够天真，不能将中心运用程序逻辑动态地拆分代码。

以上两点中，第一点对我们的示例来讲无疑是个题目，index.js 和another-module.js中都引入了 lodash，如许就在两个 bundle 中形成反复援用。接着，我们经由过程运用 SplitChunks 来移除反复的模块。

2.防备反复：运用SplitChunks 去重和星散 chunk。webpack4 之前版本用的是CommonsChunkPlugin

//webpack.common.js
  const path = require('path');
  module.exports = {
    entry:  {
      index: './src/index.js',
      another: './src/another-module.js'
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Production'
      })
    ],
    output: {
      filename: '[name].bundle.js',            //依据进口文件名来定义输出文件名
      path: path.resolve(__dirname, 'dist')
    },
+   optimization: {
+     splitChunks: {
+       chunks: 'all'
+     }
+   }
  };

再次实行npm run build检察结果

...

vendors~another~index.bundle.js   69.5 KiB       0  [emitted]  vendors~another~index
              another.bundle.js   1.54 KiB       1  [emitted]  another
                index.bundle.js   1.54 KiB       2  [emitted]  index
                
...

视察打包后文件大小，可以看到index.bundle.js和another.bundle.js中已移除了反复的依靠模块。lodash 被星散到零丁的vendors~another~index.bundle.jschunk中。

3.动态导入：经由过程模块的内联函数调用来星散代码。
略～。～

星散css

须要用到插件mini-css-extract-plugin，这个插件会将提取css到零丁的文件，依据每一个包括css的js文件建立一个css文件，因而，你的款式将不再内嵌到 JS bundle 中。如果你的款式文件大小较大，这会做更快提早加载，由于 CSS bundle 会跟 JS bundle 并行加载。同时还支撑按需加载css和SourceMaps.

相较于旧版extract-text-webpack-plugin插件,mini-css-extract-plugin的上风有

• 异步加载
• 没有反复的编译
• 更轻易运用
• Specific to CSS
• 支撑热更新

npm i mini-css-extract-plugin -D

//webpack.common.js
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  module.exports = {
    ...
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].css",
      })
    ],
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                publicPath: '../'             //可以设置输出的css文件途径
              }
            },
            "css-loader"
          ]
        }
      ]
    }
    ...
  }

注重，这个插件不兼容style-loader (用于以<style>标签情势将css-loader内部款式注入到HTML页面)。

如果想在开辟环境下运用style-loader，在临盆环境星散css文件，可以这么设置：

//webpack.common.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader:"postcss-loader",    //本文未用到此loader...
            options: {           // 如果没有options这个选项将会报错 No PostCSS Config found
                plugins: (loader) => []
            }
          },
          'sass-loader',
        ],
      }
    ]
  }
}

很明显我们须要先装置处置惩罚款式文件的种种loader

npm i style-loader css-loader postcss-loader node-sass sass-loader -D

这里有个题目，node环境变量process.env.NODE_ENV在webpack.config中实际上是undefined，之前说起的mode设置会自动定义这个环境变量，但只能在打包后的js中取到，如安在webpack的设置文件中猎取这个值呢，须要引入cross-env

npm i cross-env -D

然后在package.json的剧本敕令中指定环境变量

"start": "cross-env NODE_ENV=development webpack-dev-server --open --config webpack.dev.js",
"build": "cross-env NODE_ENV=production  webpack --config webpack.prod.js"

可自行增添css文件，在js中import，实行npm run build检察结果

固然也可以不猎取process.env.NODE_ENV来辨别环境，在dev.js和prod.js离别设置处置惩罚款式文件的rule就好了，这也是最最先我们离开写开辟环境和临盆环境的webpack设置文件的缘由。这里说起只是轻易从低版本webpack迁移到4.x。

在单个文件中提取一切CSS
合营optimization.splitChunks.cacheGroups运用

//webpack.common.js
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }

会分外天生一个styles.bundle.js

根据进口JS来星散css

//webpack.common.js
...

function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}

module.exports = {
  entry:  {
    index: './src/index.js',
    another: './src/another-module.js'
  },

  ...

  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {                                //星散第三方库
          test: /[\\/]node_modules[\\/]/,
          name: 'lodash',
          chunks: 'all'
        },
        indexStyles: {
          name: 'index',                        
          test: (m,c,entry = 'index') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true
        },
        otherStyles: {
          name: 'another',
          test: (m,c,entry = 'another') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
};

紧缩css

webpack5可以会内置CSS紧缩，webpack4须要运用像optimize-css-assets-webpack-plugin如许的插件。有个题目是设置optimization.minimizer后，会掩盖上文提到的mode设置项供应的默许值，因而须要同时运用JS紧缩插件UglifyJsPlugin

npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

//webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.config.js');

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = merge(common,{
    mode: "production",
    optimization: {
        minimizer: [
          new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: true // set to true if you want JS source maps
          }),
          new OptimizeCSSAssetsPlugin({})
        ],
    }
});

缓存

我们都晓得浏览器猎取资本是比较消耗时候的，所以它会运用一种名为 缓存 的手艺。经由过程掷中缓存，以下降网络流量，使网站加载速率更快。如果我们在布置新版本时稳定动资本的文件名，浏览器就可以会以为它没有被更新，就会运用它的缓存版本。因而确保 webpack 编译天生的文件可以被客户端缓存，而在文件内容变化后，可以要求到新的文件是很有必要的。

经由过程运用 output.filename 举行文件名替代，可以确保浏览器猎取到修正后的文件。[hash]替代可以用于在文件名中包括一个构建相干的hash，然则更好的体式格局是运用[chunkhash]替代，在文件名中包括一个 chunk相干的hash。遗憾的是chunkhash和热更新不兼容，所以开辟环境和临盆环境要离开设置。

//webpack.common.js
  ...
  output: {
      filename: devMode ? '[name].[hash:8].js': '[name].[chunkhash:8].js',       //数字8示意取hash标识符的前八位
      chunkFilename: devMode ? '[name].[hash:8].js': '[name].[chunkhash:8].js',  //异步模块的文件输着名
      path: path.resolve(__dirname, 'dist')
  },
  ...

关于[hash]和[chunkhash]的区分，简朴来讲，[hash]是编译（compilation）后的hash值，compilation对象代表某个版本的资本对应的编译历程。项目中任何一个文件修改，webpack就会从新建立compilation对象，然后盘算新的compilation的hash值，一切的编译输出文件名都邑运用雷同的hash指纹，改一个就一同变。而[chunkhash]是依据详细模块文件的内容盘算所得的hash值，某个文件的修改只会影响它自身的hash指纹，不会影响其他文件。

上文代码星散一节中已提到了如何将第三方库（比方lodash或react）提取到零丁的vendor chunk文件中，由于它们很少像当地的源代码那样频仍修正。应用客户端的长效缓存机制，可以消弭要求，削减向效劳器猎取资本，同时还能保证客户端代码和效劳器端代码版本一致。
除了第三方库，webpack在进口模块中，包括了某些榜样(boilerplate)，确实来讲就是runtime和 manifest。即webpack运转时的指导代码，这部份代码我们也将它零丁提取出来。

//webpack.common.js
  ...
  optimization: {
    runtimeChunk: 'single',        //星散webpack运转时的指导代码
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
  ...

我们删掉another-module.js,修正index.js以下

///index.js
import _ from 'lodash';

function component() {
    var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component());

实行npm run build

发生以下输出：

Hash: 131e8681e4403392cb5d
Version: webpack 4.16.1
Time: 744ms
              Asset       Size  Chunks             Chunk Names
  index.5bc56cae.js  260 bytes       0  [emitted]  index
vendors.5d8f5a63.js   69.5 KiB       1  [emitted]  vendors
runtime.eb6eb2fb.js   1.42 KiB       2  [emitted]  runtime
         index.html  316 bytes          [emitted]  
[1] ./src/index.js 253 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {1} [built]
[3] (webpack)/buildin/module.js 497 bytes {1} [built]
    + 1 hidden module
Child html-webpack-plugin for "index.html":
     1 asset
    [2] (webpack)/buildin/global.js 489 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules

可以看到编译出的文件名后加上了hash，运转时的指导代码也被零丁提取出来了。

接着增添一个print.js

///print.js
export default function print(text) {
   console.log(text);
};

修正index.js

///index.js
  import _ from 'lodash';
+ import Print from './print';

  function component() {
    var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.onclick = Print.bind(null, 'Hello webpack!');

    return element;
  }

  document.body.appendChild(component());

再实行npm run build

构建结果以下：

Hash: a710a54674ea8d4b3263
Version: webpack 4.16.1
Time: 3328ms
              Asset       Size  Chunks             Chunk Names
  index.15466585.js  327 bytes       0  [emitted]  index
vendors.7bde7828.js   69.5 KiB       1  [emitted]  vendors
runtime.eb6eb2fb.js   1.42 KiB       2  [emitted]  runtime
         index.html  316 bytes          [emitted]  
[1] (webpack)/buildin/global.js 489 bytes {1} [built]
[2] (webpack)/buildin/module.js 497 bytes {1} [built]
[3] ./src/index.js + 1 modules 406 bytes {0} [built]
    | ./src/index.js 337 bytes [built]
    | ./src/print.js 64 bytes [built]
    + 1 hidden module
Child html-webpack-plugin for "index.html":
     1 asset
    [2] (webpack)/buildin/global.js 489 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules

我们希冀的是，只需 index bundle 的 hash 发作变化，但是vendors也随着变了。这是由于每一个 module.id 会基于默许的剖析递次(resolve order)举行增量。也就是说，当剖析递次发作变化，ID 也会随之转变。（官方文档里说runtime的hash也发作了变化，这里并未涌现）
可以运用两个插件来处理这个题目。一是NamedModulesPlugin，将运用模块的途径而不是数字标识符。此插件有助于在开辟过程当中输出结果的可读性，但实行时候会长一些。二是运用webpack内置插件HashedModuleIdsPlugin，引荐用于临盆环境构建：

  const webpack = require('webpack');
  ...
  module.exports = {
    ...
    plugins: [
      ...
      new webpack.HashedModuleIdsPlugin(),
      ...
    ],
    ...
  };

接下来，我们可以随便修正index.js的代码或许增删print.js,再举行构建检察hash的变化。

关于css缓存
如果index.js援用了一个index.css文件，它们会共用雷同的chunkhash值。这时候如果index.js变动了代码，index.css文件就算内容没有任何转变也会反复构建。
我们可以运用MiniCssExtractPlugin里的contenthash，保证css文件所处的模块里只需css文件内容稳定，其自身就不会反复构建。

new MiniCssExtractPlugin({
  filename: "[name].[contenthash:8].css",
  chunkFilename: "[name].[contenthash:8].css"
}),

如许基础就完成了webpack的缓存设置。

有个小题目是,当修正index.css文件代码，从新构建后index.js的hash值也一同转变了。。。
尝试了下装置插件WebpackMd5Hash可以处理

npm i webpack-md5-hash -D

but，这个插件可以会激发别的bug，好吧这里先不必，后续补充，有兴致可自行搜刮

Babel

完成了基础的设置文件编写与代码星散，开辟中须要用babel将旧的浏览器或环境中的es 2015+代码转换为es5。
须要装置一些依靠。

babel-core           //必备的中心库
babel-loader         //webpack loader设置必备
babel-preset-env     //支撑es2015、2016、2017，
babel-preset-stage-0 //默许向后支撑 stage-1,stage-2,stage-3,
babel-runtime        
babel-plugin-transform-runtime //转译新的API

npm i babel-runtime -S

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-plugin-transform-runtime  -D

建立.babelrc文件

///.babelrc
{
  "presets": [
    "env",
    "stage-0"
  ],
  "plugins": [
    ["transform-runtime", {
      "helpers": false, //发起为false
      "polyfill": false, //是不是切换新的内置插件（Promise，Set，Map等）为运用非全局污染的 polyfill，依据你的网站兼容性状况来看，开启会增添许多分外的代码
      "regenerator": true //是不是切换 generator 函数为不污染全局作用域的 regenerator runtime。
    }],
  ]
}

关于 babel-polyfill 与 babel-plugin-transform-runtime

babel 可以转译新的 JavaScript 语法，但并不会转化BOM内里不兼容的API比方Promise,Set,Symbol,Array.from,async 等。这时候就须要 polyfill(软垫片) 来转化这些API

babel-polyfill会仿效一个完全的 ES2015+ 环境，如许你就可以运用新的内置对象比方 Promise 或WeakMap, 静态要领比方 Array.from 或许 Object.assign, 实例要领比方 Array.prototype.includes 和天生器函数（供应 regenerator 插件）。babel-polyfill瑕玷是它经由过程改写全局prototype的体式格局完成，会污染全局对象所以不适合第三方库的开辟,且打包后代码冗余量比较大，我们可以不须要用到一切的新API，关于当代浏览器有些也不须要polyfill。

babel-plugin-transform-runtime 依靠babel-runtime，babel编译es6到es5的过程当中，babel-plugin-transform-runtime会自动polyfill es5不支撑的特征，这些polyfill包就是在babel-runtime这个包里（这就是为啥babel-runtime 须要作为临盆依靠引入（运用 –save））。transform-runtime长处是不会污染全局变量，屡次运用只会打包一次，而且一致按需引入依靠,无反复、过剩引入。瑕玷是比方”foobar”.includes(“foo”)等实例要领将不起作用。

React

以react开辟为例，如果是搭建新的项目，可以直接装置官方脚手架create-react-app或许运用阿里的开源ui框架 Ant Design
这里仅仅提一下如安在webpack中设置react开辟环境

npm install react react-dom -S

还须要装置

babel-plugin-transform-decorators-legacy //支撑修饰符语法 @connect
babel-preset-react   //剖析react语法
react-hot-loader     //react热更新须要在babelrc做设置

///.babelrc
  {
  "presets": [
    "env",
    "react",
    "stage-0"
  ],
  "plugins": [
    ["transform-runtime", {
      "helpers": false, //发起为false
      "polyfill": false, //是不是最先polyfill，依据网站兼容性决议是不是开启
      "regenerator": true 
    }],
    "react-hot-loader/babel",     //react热更新插件
    "transform-decorators-legacy" //修饰符语法转换插件
  ]
}

如果之前webpack-dev-server设置准确，这时候只需把你的根组件标记为热导出，就可以启用react热更新

///index.js
  import React from 'react';
  import { hot } from 'react-hot-loader';
     
  const App = () => <div>Hello World!</div>
     
  export default hot(module)(App);

别忘了设置babel-loader

///webpack.common.js
  module: {
      rules: [{
          test: /\.jsx?$/,
          use: 'babel-loader'
      }]
  }

未完待续，容老汉喝口水先…