webpack 开发生产环境配置构建
导读
在该篇博文中，我们将分别部署生产和开发的webpack打包编译以及项目运行环境
项目地址：https://github.com/RiversCoder/webpack-test
配置文件
- 安装
webpack-merge
cnpm install --save-dev webpack-merge
- 在项目主目录中新建如下几个
js文件：
D:\me\npm\test\webpack-test>echo null>webpack.common.js
D:\me\npm\test\webpack-test>echo null>webpack.dev.js
D:\me\npm\test\webpack-test>echo null>webpack.prod.js
- 公共配置文件webpack.common.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('./webpack.common.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('./webpack.common.js');
module.exports = merge(common, {
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
],
});
现在，在webpack.common.js 中，我们设置了 entry 和 output等常用公共配置，并且在其中引入这两个环境公用的全部插件。在 webpack.dev.js 中，我们为此环境添加了推荐的 devtool（强大的 source map）和简单的 devServer 配置。最后，在 webpack.prod.js 中，我们引入了之前在 tree shaking指南中介绍过的 UglifyJSPlugin。
注意，在环境特定的配置中使用 merge() 很容易地包含我们在 dev 和 prod 中的常见配置。webpack-merge 文档地址：https://www.npmjs.com/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
> [email protected] start D:\me\npm\test\webpack-test
> webpack-dev-server --open --config webpack.dev.js
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./dist
i ｢wdm｣: Hash: 55a03b3ef248f399cb1c
Version: webpack 4.34.0
Time: 4803ms
Built at: 2019-06-17 10:58:02
Asset Size Chunks Chunk Names
836340c677d81305c33ed659d67328da.jpg 28.1 KiB [emitted]
app.bundle.js 2.27 MiB app [emitted] app
ec581258a2a8c1a8bd018aef265b4152.ttf 16.2 MiB [emitted]
index.html 182 bytes [emitted]
Entrypoint app = app.bundle.js
[0] multi ./node_modules/[email protected]@webpack-dev-server/client?http://localhost ./src/index.js 40 bytes {app} [built]
[./node_modules/[email protected]@ansi-html/index.js] 4.16 KiB {app} [built]
[./node_modules/[email protected]@lodash/lodash.js] 527 KiB {app} [built]
[./node_modules/[email protected]@strip-ansi/index.js] 161 bytes {app} [built]
[./node_modules/[email protected]@webpack-dev-server/client/index.js?http://localhost] ./node_modules/[email protected]@webpack-dev-server/client?http://localhost 4.29 KiB {app} [built]
[./node_modules/[email protected]@webpack-dev-server/client/overlay.js] 3.59 KiB {app} [built]
[./node_modules/[email protected]@webpack-dev-server/client/socket.js] 1.04 KiB {app} [built]
[./node_modules/[email protected]@webpack-dev-server/client/utils/createSocketUrl.js] 2.77 KiB {app} [built]
[./node_modules/[email protected]@webpack-dev-server/client/utils/log.js] 964 bytes {app} [built]
[./node_modules/[email protected]@webpack-dev-server/client/utils/reloadApp.js] 1.63 KiB {app} [built]
[./node_modules/[email protected]@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 modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/[email protected]@html-webpack-plugin/lib/loader.js!./node_modules/[email protected]@html-webpack-plugin/default_index.ejs] 392 bytes {0} [built]
[./node_modules/[email protected]@lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/[email protected]@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/[email protected]@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
> [email protected] build D:\me\npm\test\webpack-test
> npx webpack --config webpack.prod.js
Hash: 39651a5cbfb2ce0b3914
Version: webpack 4.34.0
Time: 13063ms
Built at: 2019-06-17 14:09:10
Asset Size Chunks Chunk Names
836340c677d81305c33ed659d67328da.jpg 28.1 KiB [emitted]
app.bundle.js 76.8 KiB 0 [emitted] app
app.bundle.js.map 699 KiB 0 [emitted] app
ec581258a2a8c1a8bd018aef265b4152.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/[email protected]@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 modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 2 hidden modules