安装依赖包
npm init // 新建一个package.json文件
npm i -D webpack webpack-cli webpack-dev-server // 安装webpack相关
npm i --save react react-dom // 安装react
npm 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(
<h1>表白任素汐！</h1>,
document.getElementById('root')
)
复制代码.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
]
}
复制代码index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
复制代码在package.json的scripts添加命令
"dev": "webpack-dev-server --config build/webpack.dev.conf.js",
复制代码最后在命令行启动，一个最简单的react项目配置好了。
npm run dev
复制代码模块热更新
webpack通过watch实现热更新，其实就是将我们最后一次修改的时间记录下来，然后定时去监测我们文件的修改时间，发现两者不一样，webpack就会自己去重新创建，我们可以设置监测的间隔时间，以及发现了不同，延长多久去重新构建。（详见webpack WatchOptions）
如果改变页面内容，整个页面都会刷新，但是如果模块很多的话，编译就会很慢。模块热更新就是检测代码有没有修改，只将修改的模块进行重新编译，并替换掉之前的模块，这样只有改变的模块才会更新，就像ajax一样局部刷新。
npm install react-hot-loader
npm 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 (
<h1>表白任素汐！</h1>
);
}
}
export default hot(module)(App);
复制代码修改index.js
import ReactDOM from 'react-dom';
import React from 'react';
import App from './home';
ReactDOM.render(
<App />,
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属性
<script src="<%= htmlWebpackPlugin.options.vendor %>"></script>
复制代码我们在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），这个也许可以进行一些优化，但是生产环境我们追求不再是时间，而是文件体积和加载速度等，感兴趣的童鞋可以自己研究一下~
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
