說在開頭css
上個月斷斷續續的在研究webpack的配置,可是不少網上的文章基本上都是隻說了開發環境的配置,而忽略了生產環境的配置。大體研究了一下門路,而後就來寫一篇隨筆讓本身能在之後能有個地方能夠作參考。html
正文開始node
我就僞裝你們都是裝了node的狀況下。
react
"scripts": { "start": "NODE_ENV=dev webpack-dev-server --progress --colors" }
new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false')) })
"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" },
new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': JSON.stringify(process.env.NODE_ENV) } }),
接下來把開發代環境的配置和生產環境的配置貼上jquery
webpack.config.jswebpack
var path = require('path') var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin'); var OpenBrowserPlugin = require('open-browser-webpack-plugin'); module.exports = { entry: path.resolve(__dirname, 'app/index.js'), output: { filename: "bundle.js" }, resolve: { extensions: ['', '.js', '.jsx'] }, module: { 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 ] }, postcss: [ require('autoprefixer') //調用autoprefixer插件,例如 display: flex ], plugins: [ // html 模板插件 new HtmlWebpackPlugin({ template: __dirname + '/app/index.html' }), // 熱加載 new webpack.HotModuleReplacementPlugin(), // 打開瀏覽器 new OpenBrowserPlugin({ url: 'http://localhost:8080' }), // 可在業務js代碼中使用 __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 } }, colors: true, // 終端舒服爲彩色 historyApiFallback: true, //不跳轉,在開發單頁應用時很是有用,它依賴於HTML5 history API,若是設置爲true,全部的跳轉將指向index.html inline: true, // 實時刷新 hot: true, // 使用熱加載插件 HotModuleReplacementPlugin } }
webpack.production.config.jscss3
var pkg = require('./package.json') 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.js'), // 將 第三方依賴(node_modules中的) 單獨打包 vendor: Object.keys(pkg.dependencies) }, output: { path: __dirname + "/build", filename: "/js/[name].[chunkhash:8].js" }, 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 Nick930826@github.com."), // html 模板插件 new HtmlWebpackPlugin({ template: __dirname + '/app/index.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('/css/[name].[chunkhash:8].css'), // 提供公共代碼 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '/js/[name].[chunkhash:8].js' }), // 可在業務 js 代碼中使用 __DEV__ 判斷是不是dev模式(dev模式下能夠提示錯誤、測試報告等, production模式不提示) new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false')) }) ] }