共计 2757 个字符，预计需要花费 7 分钟才能阅读完成。
相关链接
- webpack4 详细教程，从无到有搭建 react 脚手架（一）
配置插件 clean-webpack-plugin、html-webpack-plugin，这两个插件基本上是必配的了
介绍
- clean-webpack-plugin – 每次打包时清理上次打包生成的目录
官网指南关于这个插件部分内容已经过时没有更新，按照官网配置会出错，所以参考 github 上这个插件文档来配置，文档地址: https://github.com/johnagan/c…
- html-webpack-plugin – 生成打包文件中的 index.html
安装
yarn add clean-webpack-plugin html-webpack-plugin -D这两个插件在两种模式下都要用到，所以配置在 common.js
config/webpack.common.js
...
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const {CleanWebpackPlugin} = require('clean-webpack-plugin');
function webpackCommonConfigCreator(options){
...
return {
...
plugins: [+ new HtmlWebpackPlugin(),
+ new CleanWebpackPlugin({+ cleanOnceBeforeBuildPatterns: [path.resolve(process.cwd(), "build/"), path.resolve(process.cwd(), "dist/")]
+ }),
]
}
}
...更改开发代码，在页面上插入一个元素
src/index.js
var ele = document.createElement('div');
ele.innerHTML = "hello webpack";
document.body.appendChild(ele);效果
yarn start，效果：
yarn build, build 目录下生成 index.html 并且引入了 bundle.js
接下来配置 react
React
安装 react
yarn add react react-dom安装 babel
yarn add @babel/core @babel/cli @babel/preset-env -D
yarn add @babel/preset-react -D
yarn add babel-loader -D配置 babel-loader
config/webpack.common.js
...
function webpackCommonConfigCreator(options){
...
return {
...
+ module: {
+ rules: [
+ {+ test: /\.(js|jsx)$/,
+ include: path.resolve(__dirname, "../src"),
+ use: [
+ {
+ loader: "babel-loader",
+ options: {+ presets: ['@babel/preset-react'],
+ }
+ }
+ ]
+ }
+ ]
+ },
...
}
}准备基本的 react 文件
src/index.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './App.js';
ReactDom.render(<App />, document.getElementById('root'));src/App.js
import React from 'react';
function App(){
return (
<div>
hello react
</div>
)
}
export default App;App 节点挂在在 id 为 root 的 div 上，而 html-webpack-plugin 插件默认生成的 html 没有这个 div, 所以需要配置插件使用我们定义的模板
创建 public/index.html
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>config/webpack.common.js
...
function webpackCommonConfigCreator(options){
...
return {
...
plugins: [- new HtmlWebpackPlugin(),
+ new HtmlWebpackPlugin({+ template: path.resolve(__dirname, "../public/index.html")
+ }),
...
]
}
}
yarn start，编译正常
React 模块热替换
开发模式下，改动代码，浏览器将刷新页面来更新改动，配置模块热替换，浏览器不刷新，而是通过 dom 操作来更新改动，对频繁更新代码的开发模式更加友好
安装 loader
yarn add react-hot-loader -D配置 loader
config/webpack.common.js
...
function webpackCommonConfigCreator(options){
...
return {
...
module: {
rules: [
{test: /\.(js|jsx)$/,
include: path.resolve(__dirname, "../src"),
use: [
{
loader: "babel-loader",
options: {presets: ['@babel/preset-react'],
+ plugins: ["react-hot-loader/babel"],
}
}
]
}
]
},
...
}
}修改 react 代码
src/App.js
+ import {hot} from 'react-hot-loader/root';
...
export default hot(App);开启 webpackDevServer 热加载
config/webpack.dev.js
...
const config = {
devServer: {contentBase: path.join(__dirname, "../dist"),
+ hot: true
}
}
...未完待续！
正文完
