React项目的webpack配置（最佳实践的基础版）
一个合格的前端开发者必须夯实基础，深入地理解所使用的技术，而不是浮于表面，保持“够用就行”的技术认知。
Vue CLI 或者 create-react-app 这样高度集成的 CLI 工具，目的是降低开发者的使用成本，但因为这种“黑盒工具”大多数采用的都是通用的配置，而优秀的开发人员应该学会“因地制宜”，根据实际情况更灵活地去使用每一个工具。
下面是我认为只要是React项目， webpack 基本上都会有配置上的功能（配置了打包过程优化、资源代码分块、Tree-shaking 等这类功能），像less，sass这些因人而异的 loader 就没有进行引入配置（所以叫基础版，可以因人而异往上加或修改）
如果想要了解熟悉webpack，最好的方式就是自己动手按照指南上走一遍（提醒：wbpack中文文档中的指南有些内容过时了，观看最新内容可以到英文官网），然后把概念过一遍。
公用基本配置的功能：
预处理css，图片，字体
配置babel来转义 jsx 和 es6 语法
自动生成 HTML 文件
webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
]
},
plugins: [
new HtmlWebpackPlugin({ template: './public/index.ejs' }) //就是把你的html后缀改成ejs就好了
],
};
开发环境配置的功能：
一个简单的开发服务器
启动模块热替换(Hot Module Replacement)
源代码错误定位
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
mode: 'development'
});
生产环境配置的功能：
编译构建前清空 /dist 文件夹
压缩代码，删除未引用代码（tree shaking）
启用 library 针对用户环境进行的代码优化
编译hash值文件（解决浏览器缓存问题）
代码拆分，提取公用代码
webpack.prod.js
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = merge(common, {
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
name: 'vendor',
chunks: 'all',
}
}
}
},
plugins: [
new CleanWebpackPlugin(),
],
mode: 'production',
});
package.json
上面用的一些 npm 包和 scripts 的设置
{
//......
"dependencies": {
//......
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"babel-loader": "^8.0.0-beta.0",
"lodash": "^4.17.15",
"webpack": "^4.43.0"
},
"devDependencies": {
//......
"@babel/preset-react": "^7.10.1",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"style-loader": "^1.1.3",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
//......
}
发表评论 (审核通过后显示评论)：