前言

---

使用當前的webpack配置能不能打包構建項目呢？當然可以，但這不是我們想要的，所以，讓我們來看一看生產環境需要怎么配置webpack吧

開發

---

1. 生產環境配置
   在根目錄創建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文件夾 和壓縮后的代碼。

2. 抽離公共的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
}
復制代碼

3. 重構開發環境配置
   修改開發環境的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" : ""}}}}
}
復制代碼

4. 重構生產環境配置
   修改開發環境的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的配置，并且抽出了公共配置，重構了開發環境和生產環境的配置。

下篇我們來介紹實現單元測試

系列文章

---

1. 從零開始React項目架構(一)
2. 從零開始React項目架構(二)
3. 從零開始React項目架構(三)

源碼

---

React項目架構