開發環境和生產環境整個配置源碼在github上，源碼地址：github-webpack-react 如果覺得有幫助，點個Star謝謝！！
開發環境肯定不能把css，js，字體圖標之類的打包在一起，肯定要分開打包，還有就用js的類庫和自己單獨寫的js也要單獨打包，這樣可以防止js文件特別大，接下來配置生產環境
我的項目目錄和打包后的目錄如下
一、對js單獨打包處理
所有依賴的類庫都在package.json文件里
//都在這個屬性里
"dependencies": { "react": "^16.2.0", "react-dom": "^16.2.0" }
需要用到webpack的插件CommonsChunkPlugin 提取第三方公共庫配置如下
var pkg = require('./package.json')；//首先引入package.json 通過pkg.dependencies來獲取第三方公共庫
主要修改兩個地方
entry: {
index:path.resolve(__dirname, 'src/index.jsx'),
// 將 第三方依賴（node_modules中的） 單獨打包 pkg或獲取到package.json文件中的第三方依賴庫Object.keys()
//Object.keys 返回一個所有元素為字符串的數組，其元素來自於從給定的對象上面可直接枚舉的屬性。這些屬性的順序與手動遍歷該對象屬性時的一致。
vendor: Object.keys(pkg.dependencies) ////插件中name,filename必須以這個key為值 這個字段和CommonsChunkPlugin這個插件是關聯的
},
output: {
path: path.resolve(__dirname, 'dist'), //打包后文件的輸出路徑
filename: "js/[name].[chunkhash:8].js" //[chunkhash:8]這個是為了添加時間戳 //這里會輸出兩個js文件一個是自己寫的js一個文件是第三方公共庫的
},
plugins:[
// 提供第三方依賴的代碼
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
// filename:"vendor.js"//忽略則以name為輸出文件的名字，否則以此為輸出文件名字
})
]
這里用到給文件添加時間戳，這里需要注意的是對js添加時間戳最好使用chunkhash，使用 hash 對js和css進行簽名時，每一次hash值都不一樣，導致無法利用緩存，
有必要了解一下hash，chunkhash和contenthash的區別，可以參考我寫的文章：hash與chunkhash區別和需要注意的問題
二、對css單獨打包
//需要安裝這個插件
npm install --save-dev extract-text-webpack-plugin
webpack配置如下//配置css{
test: /\.css$/, use: ExtractTextPlugin.extract({ //將css分離 fallback: "style-loader", publicPath:'../', //解決打包圖片或者字體圖標出現路徑的問題 use: [ {loader: 'css-loader',options: {importLoaders: 1,minimize:true}}, //添加true是為了壓縮css {loader: 'postcss-loader',options:{ident:"postcss",plugins:[require("autoprefixer")("last 100 versions")]}} ] }) }, //配置scss 執行順序是從右往走的這個順序是不能改變的 { test: /\.scss$/, use: ExtractTextPlugin.extract({ //將css分離 fallback: "style-loader", publicPath:'../', //解決打包圖片和字體圖標出現路徑的問題 use: [ {loader: 'css-loader',options: {importLoaders: 2,minimize:true}},//添加tue是為了壓縮css的 {loader: 'postcss-loader',options:{ident:"postcss",plugins:[require("autoprefixer")("last 100 versions")]}}, 'sass-loader' ] }) },
plugins:[
//提取css文件
new ExtractTextPlugin({
filename:'css/[name].[contenthash:8].css', //這里使用的contenthash，這樣修改css只有css的文件變化
})
]
大家可以看一下我的另外一篇博客介紹幾個hash直接的關系：點擊查看
三、對圖片和字體圖標單獨打包
//對字體打包直接用file-loader不要使用url-loader，file-loader直接把文件移動到dist下不需要做任何處理
npm install --save-dev file-loader
想了解具體的請看另外一篇博客： webpack3配置字體圖標和打包相關問題
具體配置如下
//配置圖片必須使用hash { test:/\.(jpg|png|gif|jpeg)$/, use:[ {loader:'url-loader',options: {limit: 8192,name:'img/[name].[hash:8].[ext]'}}//必須使用hash ] }, //配置字體圖標 這里最好使用file-loader { test: /\.(woff|woff2|svg|ttf|eot)$/, use:[ {loader:'file-loader',options:{name:'fonts/[name].[hash:8].[ext]'}}//會打包到dist下的fonts文件夾下，必須使用hash ] }
四、需要使用插件html-webpack-plugin(生成html上篇已經講過)和UglifyJsPlugin(壓縮js代碼不用任何配置直接使用)
new HtmlWebpackPlugin({ template: __dirname + '/src/index.template.html' //默認會在dist路徑下生成index.html並引用所有的靜態資源 }), new webpack.optimize.UglifyJsPlugin({ //輸出不顯示警告 compress:{ warnings:false //默認值 }, //輸出去掉注釋 output:{ comments:false //默認值 } })
五、需要下載刪除文件夾插件
npm install --save-dev rimraf
然后在package.json中配置
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --hot --colors --inline --open", "build": "rimraf dist && webpack --config webpack.dev.js" //打包前需要先刪除dist文件夾 }
到這一步開發環境的配置也完成
開發環境和生產環境整個配置源碼在github上，源碼地址：github-webpack-react 如果覺得有幫助，點個Star謝謝！！
相關文章：
手把手教你用webpack3搭建react項目(開發環境和生產環境)(一)