版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nzyalj/article/details/77689068
起因
想试试ReactJS，准备照着官网的教程学习一下，官网推荐的搭建本地开发环境是使用React自己的cli工具，但是呢，为了顺便再练习一下Webpack的使用 ，所以就手工搭建了
目标
使用 webpack-merge 使开发（development）和 生产（production）分离
使用babel解析编译ReactJS和JSX
使用 css-loader, style-loader 对css文件进行处理
在开发模式下使用webpack-dev-server
在生产模式下对js文件进行压缩
项目结构
.
├── dist/ <---- 生产环境使用webpack处理后存放的文件目录
├── node_modules/
├── package-lock.json
├── package.json
├── src
│ ├── components/ <---- React 组件
│ ├── index.css <---- 主css文件
│ ├── index.html <---- 主html文件
│ └── index.js <---- 主js文件
├── .babelrc <---- babel配置文件
├── webpack.common.js <---- webpack通用配置
├── webpack.dev.js <---- webpack开发环境配置
└── webpack.prod.js <---- webpack生产环境配置
使用的模块
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.5",
"html-webpack-plugin": "^2.30.1",
"path": "^0.12.7",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0"
}相关配置文件
// .babelrc
{
"presets":[
"es2015", "react"
]
}// webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// 入口js文件
entry: './src/index.js',
module: {
loaders: [
// 对 js 与 jsx 文件进行处理
{test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
// 对css文件进行处理
{
test: /\.css$/, use: [
{loader: "style-loader"},
{
loader: "css-loader",
options: {
// 对css文件进行压缩
minimize: true
}
}
],
}
]
},
// 删去webpack生成的没有的文件
plugins: [
new CleanWebpackPlugin(['dist']),
]
};
// webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');
// 引入通用webpack配置文件
const common = require('./webpack.common.js');
// 对处理html的插件进行设置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = merge(common, {
// 使用 source-map
devtool: 'source-map',
// 对 webpack-dev-server 进行配置
devServer: {
contentBase: './dist',
// 设置localhost端口
port: 9000,
// 自动打开浏览器
open: true,
},
plugins: [
HtmlWebpackPluginConfig
],
// 设置出口文件地址与文件名
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
});// webpack.prod.js
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
// 对处理 html 进行配置，其中增加了对文件进行部分压缩的配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
// 处理完的html文件存放在 './dist' 中
template: './src/index.html',
filename: 'index.min.html',
inject: 'body',
minify:
{
removeAttributeQuotes: true,
removeComments: true,
removeTagWhitespace: true
}
});
// 对处理js文件的插件进行配置，对js文件进行压缩
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const UglifyJSPluginConfig = new UglifyJSPlugin({
compress: {warnings: false}
});
module.exports = merge(common, {
devtool: 'cheap-module-source-map',
output: {
// 处理完的js文件存放在 './dist' 中
path: path.resolve('dist'),
filename: 'bundle.min.js'
},
plugins: [
// 提示babel对react进行生产环境下的编译
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
UglifyJSPluginConfig,
HtmlWebpackPluginConfig
]
});使用npm快速启动webpack
// package.json
...
"scripts": {
"dev": "webpack-dev-server --color --inline --hot --config webpack.dev.js",
"build": "webpack --config webpack.prod.js --progress --color"
},
...使用 npm run dev 启动开发环境
使用 npm run build 启动生产环境
