前言

---

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

開發(fā)

---

生產(chǎn)環(huán)境配置
在根目錄創(chuàng)建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配置
我們發(fā)現(xiàn)生產(chǎn)環(huán)境和開發(fā)環(huán)境中的webpack配置有很多相同的配置，為了維護性我們最好抽離出來。
創(chuàng)建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 } 復制代碼

重構開發(fā)環(huán)境配置
修改開發(fā)環(huán)境的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" : ""}}}} } 復制代碼

重構生產(chǎn)環(huán)境配置
修改開發(fā)環(huán)境的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')] } 復制代碼

好了，現(xiàn)在我們再來試試npm run dev和npm run build命令，沒問題都可以完美運行。

總結

---

這篇文章我們介紹了生產(chǎn)環(huán)境webpack的配置，并且抽出了公共配置，重構了開發(fā)環(huán)境和生產(chǎn)環(huán)境的配置。

下篇我們來介紹實現(xiàn)單元測試

系列文章

---

從零開始React項目架構(一)

從零開始React項目架構(二)

從零開始React項目架構(三)

源碼

---

React項目架構

總結

以上是生活随笔為你收集整理的从零开始React项目架构(四)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。