前言：
本文是自己在工作中使用webpack进行react开发项目构建的一些经验总结，做以记录防范后续踩坑。
如果您还没有webpack相关基础，请先移步 入门Webpack，看这篇就够了 进行基础学习。
webpack配置文件：
一般项目中webpack配置文件分为以下两个：
webpack.config.js：用于开发环境。
webpack.production.config.js：用于生产环境的打包上线。
package.json配置：
想要在命令行工具中快速执行webpack任务，可在package.json中配置scripts，具体实现如下：
Mac系统：
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --progress --colors",
"build": "rm -rf ./build && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors"
},
Windows系统：
"scripts": {
"start": "set NODE_ENV=dev && webpack-dev-server --progress --colors",
"build": "rd/s/q build && set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress --colors"
},
配置完成后，在命令行工具中运行 $ npm start 执行开发环境的webpack.config.js文件，运行 $ npm run build 执行生产环境的 webpack.production.config.js。
package.json完整配置（基于react项目，mock用于模拟前后端数据交互）：
注：package.json中scripts配置根据当前系统进行改变，以下为Mac系统
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --progress --colors",
"mock": "node --harmony ./mock/server.js",
"build": "rm -rf ./build && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.24.0",
"eslint": "^3.4.0",
"eslint-loader": "^1.5.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"koa": "^1.2.2",
"koa-body": "^1.6.0",
"koa-router": "^5.4.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"open-browser-webpack-plugin": "0.0.2",
"postcss-loader": "^0.11.0",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0"
},
"dependencies": {
"es6-promise": "^3.2.1",
"immutable": "^3.8.1",
"react": "^15.3.1",
"react-addons-css-transition-group": "^15.3.1",
"react-addons-pure-render-mixin": "^15.3.1",
"react-dom": "^15.3.1",
"react-redux": "^4.4.5",
"react-router": "^2.7.0",
"redux": "^3.5.2",
"whatwg-fetch": "^1.0.0"
}
}
webpack.config.js具体配置：
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
// var nodeModulesPath = path.resolve(__dirname, 'node_modules')
// console.log(process.env.NODE_ENV)
module.exports = {
entry: path.resolve(__dirname, 'app/index.jsx'),
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
resolve:{
extensions:['', '.js','.jsx']
},
module: {
// preLoaders: [
// // 报错 ？？？？？
// {test: /\.(js|jsx)$/, loader: "eslint-loader", exclude: /node_modules/}
// ],
loaders: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
{ test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less' },
{ test: /\.css$/, exclude: /node_modules/, loader: 'style!css!postcss' },
{ test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000' }, // 限制大小5kb
{ test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小于5k
]
},
eslint: {
configFile: '.eslintrc' // Rules for eslint
},
postcss: [
require('autoprefixer') //调用autoprefixer插件，例如 display: flex
],
plugins: [
// html 模板插件
new HtmlWebpackPlugin({
template: __dirname + '/app/index.tmpl.html'
}),
// 热加载插件
new webpack.HotModuleReplacementPlugin(),
// 打开浏览器
new OpenBrowserPlugin({
url: 'http://localhost:8080'
}),
// 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})
],
devServer: {
proxy: {
// 凡是 `/api` 开头的 http 请求，都会被代理到 localhost:3000 上，由 koa 提供 mock 数据。
// koa 代码在 ./mock 目录中，启动命令为 npm run mock
'/api': {
target: 'http://localhost:3000',
secure: false
}
},
contentBase: "./public", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true, //实时刷新
hot: true // 使用热加载插件 HotModuleReplacementPlugin
}
}
webpack.production.config.js具体配置
var path = require('path')
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: path.resolve(__dirname, 'app/index.jsx'),
// 将 第三方依赖 单独打包
vendor: [
'react',
'react-dom',
'react-redux',
'react-router',
'redux',
'es6-promise',
'whatwg-fetch',
'immutable'
]
},
output: {
path: __dirname + "/build",
filename: "[name].[chunkhash:8].js",
publicPath: '/'
},
resolve:{
extensions:['', '.js','.jsx']
},
module: {
loaders: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
{ test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css!postcss!less') },
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css!postcss') },
{ test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000&name=img/[name].[chunkhash:8].[ext]' },
{ test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000&name=fonts/[name].[chunkhash:8].[ext]'}
]
},
postcss: [
require('autoprefixer')
],
plugins: [
// webpack 内置的 banner-plugin
new webpack.BannerPlugin("Copyright by wangfupeng1988@github.com."),
// html 模板插件
new HtmlWebpackPlugin({
template: __dirname + '/app/index.tmpl.html'
}),
// 定义为生产环境，编译 React 时压缩到最小
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
// 为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
}
}),
// 分离CSS和JS文件
new ExtractTextPlugin('[name].[chunkhash:8].css'),
// 提供公共代码
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: '[name].[chunkhash:8].js'
}),
// 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})
]
}