webpack 开发生产环境配置构建

导读

在该篇博文中，我们将分别部署生产和开发的webpack打包编译以及项目运行环境

项目地址：/RiversCoder/webpack-test

配置文件

cnpm install --save-dev webpack-merge

在项目主目录中新建如下几个js文件：

D:\me\npm\test\webpack-test>echo null>mon.jsD:\me\npm\test\webpack-test>echo null>webpack.dev.jsD:\me\npm\test\webpack-test>echo null>webpack.prod.js

公共配置文件mon.js

const path = require('path');const {CleanWebpackPlugin } = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {app: './src/index.js',},output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist'),publicPath: '/'},plugins:[new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: '生产环境搭建'})],module: {rules: [{test: /\.ttf|\.jpg$/,use: ['file-loader']},{test: /\.css$/,use: ['style-loader', 'css-loader']}]},};

开发环境文件webpack.dev.js

const webpack = require('webpack');const merge = require('webpack-merge');const common = require('./mon.js');module.exports = merge(common, {devtool: 'inline-source-map',devServer: {contentBase: './dist'},plugins: [new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('dev')})]});

线上环境文件webpack.prod.js

const webpack = require('webpack');const merge = require('webpack-merge');const UglifyJSPlugin = require('uglifyjs-webpack-plugin');const common = require('./mon.js');module.exports = merge(common, {devtool: 'source-map',plugins: [new UglifyJSPlugin({sourceMap: true}),new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')})],});

现在，在mon.js中，我们设置了entry和output等常用公共配置，并且在其中引入这两个环境公用的全部插件。在 webpack.dev.js 中，我们为此环境添加了推荐的devtool（强大的source map）和简单的devServer配置。最后，在webpack.prod.js中，我们引入了之前在tree shaking指南中介绍过的UglifyJSPlugin。

注意，在环境特定的配置中使用merge()很容易地包含我们在dev和prod中的常见配置。webpack-merge文档地址：/package/webpack-merge

编辑src/project.js如下

export default function printMe() {console.log(' 我会打印这条信息 123 ..')console.log(process.env.NODE_ENV) // new}

编辑npm scripts

编辑package.json中的scripts字段内容如下，

//..."scripts": {"test": "echo \"Error: no test specified\" && exit 1","watch": "webpack --watch","start": "webpack-dev-server --open --config webpack.dev.js", // new"server": "node server.js","build": "npx webpack --config webpack.prod.js" // new},//...

开发环境运行

1.打印如下

D:\me\npm\test\webpack-test>npm run start> webpack@1.0.0 start D:\me\npm\test\webpack-test> webpack-dev-server --open --config webpack.dev.jsi ｢wds｣: Project is running at http://localhost:8080/i ｢wds｣: webpack output is served from /i ｢wds｣: Content not from webpack is served from ./disti ｢wdm｣: Hash: 55a03b3ef248f399cb1cVersion: webpack 4.34.0Time: 4803msBuilt at: -06-17 10:58:02Asset Size Chunks Chunk Names836340c677d81305c33ed659d67328da.jpg 28.1 KiB[emitted]app.bundle.js 2.27 MiBapp [emitted] appec581258a2a8c1a8bd018aef265b4152.ttf 16.2 MiB[emitted]index.html 182 bytes[emitted]Entrypoint app = app.bundle.js[0] multi ./node_modules/_webpack-dev-server@3.7.1@webpack-dev-server/client?http://localhost ./src/index.js 40 bytes {app} [built][./node_modules/_ansi-html@0.0.7@ansi-html/index.js] 4.16 KiB {app} [built][./node_modules/_lodash@4.17.11@lodash/lodash.js] 527 KiB {app} [built][./node_modules/_strip-ansi@3.0.1@strip-ansi/index.js] 161 bytes {app} [built][./node_modules/_webpack-dev-server@3.7.1@webpack-dev-server/client/index.js?http://localhost] ./node_modules/_webpack-dev-server@3.7.1@webpack-dev-server/client?http://localhost 4.29 KiB {app} [built][./node_modules/_webpack-dev-server@3.7.1@webpack-dev-server/client/overlay.js] 3.59 KiB {app} [built][./node_modules/_webpack-dev-server@3.7.1@webpack-dev-server/client/socket.js] 1.04 KiB {app} [built][./node_modules/_webpack-dev-server@3.7.1@webpack-dev-server/client/utils/createSocketUrl.js] 2.77 KiB {app} [built][./node_modules/_webpack-dev-server@3.7.1@webpack-dev-server/client/utils/log.js] 964 bytes {app} [built][./node_modules/_webpack-dev-server@3.7.1@webpack-dev-server/client/utils/reloadApp.js] 1.63 KiB {app} [built][./node_modules/_webpack-dev-server@3.7.1@webpack-dev-server/client/utils/sendMessage.js] 402 bytes {app} [built][./node_modules/webpack/hot sync ^\.\/log$] ./node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {app} [built][./src/index.js] 997 bytes {app} [built][./src/project.js] 110 bytes {app} [built][./src/style.css] 1.13 KiB {app} [built]+ 28 hidden modulesChild html-webpack-plugin for "index.html":1 assetEntrypoint undefined = index.html[./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/default_index.ejs] 392 bytes {0} [built][./node_modules/_lodash@4.17.11@lodash/lodash.js] 527 KiB {0} [built][./node_modules/_webpack@4.34.0@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built][./node_modules/_webpack@4.34.0@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]i ｢wdm｣: Compiled successfully.

页面展示交互如下：

生产环境运行打包如下：

D:\me\npm\test\webpack-test>npm run build> webpack@1.0.0 build D:\me\npm\test\webpack-test> npx webpack --config webpack.prod.jsHash: 39651a5cbfb2ce0b3914Version: webpack 4.34.0Time: 13063msBuilt at: -06-17 14:09:10Asset Size ChunksChunk Names836340c677d81305c33ed659d67328da.jpg 28.1 KiB[emitted]app.bundle.js 76.8 KiB 0 [emitted] appapp.bundle.js.map 699 KiB 0 [emitted] appec581258a2a8c1a8bd018aef265b4152.ttf 16.2 MiB[emitted] [big]index.html 182 bytes[emitted]Entrypoint app = app.bundle.js app.bundle.js.map[1] (webpack)/buildin/global.js 472 bytes {0} [built][2] (webpack)/buildin/module.js 497 bytes {0} [built][3] ./src/style.css 1.13 KiB {0} [built][4] ./node_modules/_css-loader@3.0.0@css-loader/dist/cjs.js!./src/style.css 694 bytes {0} [built][7] ./src/font/font.ttf 82 bytes {0} [built][8] ./src/img_1.jpg 82 bytes {0} [built][11] ./src/index.js + 1 modules 1.09 KiB {0} [built]| ./src/index.js 997 bytes [built]| ./src/project.js 110 bytes [built]+ 5 hidden modulesChild html-webpack-plugin for "index.html":1 assetEntrypoint undefined = index.html[2] (webpack)/buildin/global.js 472 bytes {0} [built][3] (webpack)/buildin/module.js 497 bytes {0} [built]+ 2 hidden modules