安装依赖包
npm init // 新建一个package.json文件npm i -D webpack webpack-cli webpack-dev-server // 安装webpack相关npm i --save react react-dom // 安装reactnpm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react // 安装babel相关npm i -D html-webpack-plugin // 生成html文件复制代码
这里简单介绍一下babel
babel-loader
babel的编译器，提供转码API，比如transform，babel-loader会直接调用babel-core API对文件进行转码。
@babel/core
文件转码器，简单的说就是将es6 es7转换为让浏览器识别es5。
这里面包括了babel 的核心 api，比如 transform，主要都是处理转码的。它会把我们的 js 代码，抽象成 ast，即 abstract syntax tree（抽象语法树） 的缩写，是源代码的抽象语法结构的树状表现形式。我们可以理解为，它定义的一种分析 js 语法的树状结构。也就是说 es6 的新语法，跟老语法是不一样的，那我们怎么去定义这个语法呢。所以必须要先转成 ast，去发现这个语法的 kind，分别做对应的处理，才能转化成 es5.
@babel/preset-env
可以根据配置的目标运行环境自动启用需要的babel插件,例如对支持的浏览器进行配置:
{ "targets": { "chrome": "58", "ie": "11" }}复制代码 可以在.babelrc文件对babel进行配置。 更多需要了解babel的请。
项目目录
webpack.dev.conf.js
const path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html模板const resolve = (dir) => path.join(__dirname, '..', dir);module.exports = { mode: 'development', // webpack4新增属性，默认返回production,提供一些默认配置，例如cache:true devtool: 'cheap-module-eval-source-map', // source-map每个module生成对应的map文件 // eval 每一个module模块执行eval，不生成map文件，在尾部生成一个sourceURL对应前后关系，所以更快 // cheap 列信息 VLQ编码 // module 包含了模块之间的sourcemap entry: { home: './src/index.js', // 设置入口文件 }, output: { filename: '[name].js', // 生成的js文件的名字 path: resolve('dist'), // 生成的js存放目录 }, module: { // 配置loader rules: [ { test: /\.m?js$/, include: resolve('src'), // 只解析src下面的文件,不推荐用exclude use: { loader: 'babel-loader', } }, ], }, devServer: { // 配置webpack-dev-server， 在本地启动一个服务器运行 host: 'localhost', // 服务器的ip地址 希望服务器外可以访问就设置 0.0.0.0 port: 8088, // 端口 open: true, // 自动打开页面 }, plugins: [ new HtmlWebpackPlugin({ filename: resolve('/dist/index.html'), // 生成的html文件存放的地址和文件名 template: resolve("/index.html"), // 基于index.html模板进行生成html文件 }), ]}复制代码 index.js
import ReactDOM from 'react-dom';import React from 'react';ReactDOM.render(表白任素汐！
, document.getElementById('root'))复制代码
.babelrc
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ ]}复制代码 index.html
Webpack Sample Project 复制代码
在package.json的scripts添加命令
"dev": "webpack-dev-server --config build/webpack.dev.conf.js",复制代码
最后在命令行启动，一个最简单的react项目配置好了。
npm run dev复制代码
模块热更新
webpack通过watch实现热更新，其实就是将我们最后一次修改的时间记录下来，然后定时去监测我们文件的修改时间，发现两者不一样，webpack就会自己去重新创建，我们可以设置监测的间隔时间，以及发现了不同，延长多久去重新构建。（详见webpack ）
如果改变页面内容，整个页面都会刷新，但是如果模块很多的话，编译就会很慢。模块热更新就是检测代码有没有修改，只将修改的模块进行重新编译，并替换掉之前的模块，这样只有改变的模块才会更新，就像ajax一样局部刷新。
npm install react-hot-loadernpm i -D @babel/plugin-proposal-class-properties // 这个是针对es6 class进行添加的，因为我们新建了home.js文件用了class复制代码
修改webpack.dev.conf.js
devServer: { hot: true, // 设置热更新(引用react热更新必须设置) }, plugins: [ new webpack.HotModuleReplacementPlugin(), // 引入热更新插件(引用react热更新必须设置)， ]复制代码 .babelrc修改为
{ "presets": [ "@babel/preset-react", "@babel/preset-env" ], "plugins": [ "@babel/plugin-proposal-class-properties", "react-hot-loader/babel" ]}复制代码 新建一个home.js
import React, { Component } from 'react';import { hot } from 'react-hot-loader';class App extends Component { state = { } render() { return ( 表白任素汐！
); }}export default hot(module)(App);复制代码 修改index.js
import ReactDOM from 'react-dom';import React from 'react';import App from './home';ReactDOM.render(, document.getElementById('root'))复制代码
npm run dev看看效果吧~
dllplugin 加速神器
随着项目越来越大，我们开发调试的时候，最希望的是节省时间，尽可能快的进行编译。dllplugin借鉴于windows的dll文件，我们可以把一些项目不会改动的存放在一个文件中，每次webpack进行重新编译的时候，我们就可以直接加载，而不用再进行重新编译，就像react,react-dom等项目包。
按照这个思路我们我们再添加一个webpack.dll.config.js文件
const path = require('path')const webpack = require('webpack')// 生产环境不用dll的原因是因为很多相同的内容会重复打包的bundles里面module.exports = { entry: { vendor: ['react', 'react-dom'] }, output: { path: path.join(__dirname, '..', 'dist/vendor'), filename: '[name].dll.js', library: '[name]_[hash]' // vendor.dll.js中暴露出的全局变量名。 // 主要是给DllPlugin中的name使用， // 故这里需要和webpack.DllPlugin中的name,保持一致。 }, //在给定的 path 路径下创建一个名为 manifest.json 的文件。 这个文件包含了从 require 和 import 的request到模块 id 的映射。 DLLReferencePlugin 也会用到这个文件。 plugins: [ new webpack.DllPlugin({ context: __dirname, // 定义打包的公共vendor文件对外暴露的函数名 name: '[name]_[hash]', // manifest.json文件的输出位置 path: path.join(__dirname, '..', 'dist/vendor/manifest.json') }) ]}复制代码 webpack.dev.conf.js添加
devServer: { contentBase: resolve('dist'), // 设置服务器从那个目录提供内容，默认当前 推荐使用绝对路径。}, plugins: [ new HtmlWebpackPlugin({ filename: resolve('/dist/index.html'), // 生成的html文件存放的地址和文件名 template: resolve("/index.html"), // 基于index.html模板进行生成html文件 vendor: './vendor/vendor.dll.js', }), new webpack.DllReferencePlugin({ context: __dirname, // 跟dll.config里面DllPlugin的context一致 manifest: require(path.join(__dirname, '..', 'dist', '/vendor/manifest.json')), }), ],复制代码 在配置dllplugin的时候，有几个坑务必要注意！！！
- webpack.dll.config.js中，output的library和new webpack.DllPlugin的name务必保持一致！
- webpack.dev.conf.js中new webpack.DllReferencePlugin的执行上下文context必须和webpack.dll.config.js中的context保持一致！
- devserver中必须设置contentBase静态文件指向！这里我们把打包出来的vendor.dll.js文件放在了dist文件夹下面。
- 需要在index.html文件中引入vendor.dll.js文件，利用html-webpack-plugin获取设置的vendor属性
复制代码
我们在package.json的scripts中添加命令行：
"dev_dll": "webpack --config build/webpack.dll.config.js",复制代码
执行dev_dll就可以在看到打包好的vendor.dll.js文件
npm run dev_dll复制代码
我们再执行npm run dev，我们可以看到delegated ... from dll-reference的打包引用，就说明了dllplugin引用成功了
[./node_modules/_react-dom@16.6.3@react-dom/index.js] delegated ../node_modules/_react-dom@16.6.3@react-dom/index.js from dll-reference vendor_3b82321a4a4ec9fad65d 42 bytes {home} [built]复制代码 随着项目的丰富，我们可以把更多的不改动的三方包放在vendor.dll.js中，预计可以给项目带来30—40%的速度提升！
写在最后，dllplugin追求的是开发调试的时候尽可能减少webpack编译的时间，官方不推荐放在production中使用，一方面是dllplugin会打包重复代码（比如在vue项目中elementui，dllplugin会重复打包vue），这个也许可以进行一些优化，但是生产环境我们追求不再是时间，而是文件体积和加载速度等，感兴趣的童鞋可以自己研究一下~