前言
使用当前的webpack配置能不能打包构建项目呢?当然可以,但这不是我们想要的,所以,让我们来看一看生产环境需要怎么配置webpack吧
开发
- 生产环境配置
在根目录创建webpack.pro.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')module.exports = {entry:{main:['babel-polyfill','./src/index.js'], vendors: ['react','react-dom','react-router-dom','whatwg-fetch']},output:{path:path.resolve(__dirname,'dist'),filename:'bundle.[hash:4].js'},module:{rules:[{ test: /\.(woff|eot|ttf|svg|png|jpg)$/, use: [ { loader: 'url-loader', options: { limit: '1024' ,name: '[name].[hash:4].[ext]' } }, ] },{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,use: [ { loader: 'url-loader', options: { limit: '1024',name: '[name].[hash:4].[ext]' } }, ] },{test: /\.(css|less)$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ["css-loader","less-loader"]})},{test:/\.(js|jsx)$/,use:"babel-loader",exclude:/node_modules/}]},devtool: false,plugins:[// html 模板插件new HtmlWebpackPlugin({template:'./src/index.html',favicon: './public/favicon.png'}),// 启用作用域提升,让代码文件更小、运行的更快new webpack.optimize.ModuleConcatenationPlugin(),// 提取公共代码vendorsnew webpack.optimize.CommonsChunkPlugin({name:'vendors',filename:'[name].[hash:4].js'}),// 抽离出cssnew ExtractTextPlugin("style.css"),// 压缩js代码new webpack.optimize.UglifyJsPlugin({compress: {warnings: false,drop_console: true,pure_funcs: ['console.log']}}),// 定义全局常量new webpack.DefinePlugin({"process.env": {"NODE_ENV": JSON.stringify("production")}}),// 加署名new webpack.BannerPlugin('Copyright by Zero https://github.com/l-Lemon/blog')]
}
复制代码
在package.json
的 script 中加入
"build": "webpack --config webpack.pro.config.js"
复制代码
运行 npm run build
根目录会生成 dist
文件夹 和压缩后的代码。
- 抽离公共的webpack配置
我们发现生产环境和开发环境中的webpack配置有很多相同的配置,为了维护性我们最好抽离出来。
创建webapck.base.js
文件来存我们公共配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 抽离css
const extractCss = new ExtractTextPlugin("style.css")
// html 模版
const htmlTemplate = new HtmlWebpackPlugin({template:'./src/index.html',favicon: './public/favicon.png'})
const config = {output:{path:path.resolve(__dirname,'dist'),filename:'bundle.[hash:4].js'},module:{rules:[{ test: /\.(woff|eot|ttf|svg|png|jpg)$/, use: [ { loader: 'url-loader', options: { limit: '1024' ,name: '[name].[hash:4].[ext]' } }, ] },{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,use: [ { loader: 'url-loader', options: { limit: '1024',name: '[name].[hash:4].[ext]' } }, ] },{test: /\.(css|less)$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ["css-loader","less-loader"]})},{test:/\.(js|jsx)$/,use:"babel-loader",exclude:/node_modules/}]},
}module.exports = {htmlTemplate,extractCss,config
}
复制代码
- 重构开发环境配置
修改开发环境的webpack.config.js
为
const path = require('path')
const baseConfig = require('./webpack.base')module.exports = {entry:{main:['babel-polyfill','./src/index.js'],},...baseConfig.config,plugins:[baseConfig.htmlTemplate,baseConfig.extractCss],devServer:{contentBase: path.join(__dirname, "dist"),compress: true,port: 9000,proxy: {"/api": {target: "http://127.0.0.1:3000/",pathRewrite: {"^/api" : ""}}}}
}
复制代码
- 重构生产环境配置
修改开发环境的webpack.pro.config.js
为
const webpack = require('webpack')
const baseConfig = require('./webpack.base')module.exports = {entry:{main:['babel-polyfill','./src/index.js'],// 将第三方库包单独打包,充分利用浏览器缓存 vendors: ['react','react-dom','react-router-dom','whatwg-fetch']},...baseConfig.config,devtool: false,plugins:[// html 模板插件baseConfig.htmlTemplate,// 启用作用域提升,让代码文件更小、运行的更快new webpack.optimize.ModuleConcatenationPlugin(),// 提取公共代码vendorsnew webpack.optimize.CommonsChunkPlugin({name:'vendors',filename:'[name].[hash:4].js'}),// 抽离出cssbaseConfig.extractCss,// 压缩js代码new webpack.optimize.UglifyJsPlugin({compress: {warnings: false,drop_console: true,pure_funcs: ['console.log']}}),// 定义全局常量new webpack.DefinePlugin({"process.env": {"NODE_ENV": JSON.stringify("production")}}),// 加署名new webpack.BannerPlugin('Copyright by Zero https://github.com/l-Lemon/blog')]
}
复制代码
好了,现在我们再来试试npm run dev
和npm run build
命令,没问题都可以完美运行。
总结
这篇文章我们介绍了生产环境webpack的配置,并且抽出了公共配置,重构了开发环境和生产环境的配置。
下篇我们来介绍实现单元测试
系列文章
- 从零开始React项目架构(一)
- 从零开始React项目架构(二)
- 从零开始React项目架构(三)
源码
React项目架构