如何配置开发和线上环境
开发环境配置
安装 webpack-dev-server
npm install -D webpack-dev-server
在package.json的scripts中配置命令
{
scripts: {
"start": "webpack-dev-server --open",
}
}
为了让我们bundle文件直接注入到默认的html文件中，我们需在配置中引入 html-webpack-plugin
npm install -D html-webpack-plugin
修改配置 webpack.config.js，
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/main.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My Application'
}),
],
}
在 npm run start 启动过后，就可以正常访问项目地址了。
注：这时候会发现它的输出内容默认 index.html 并不会出现在文件夹中，可以理解为 webpack-dev-server 是动态的创建内容然后作为结果返回给浏览器的。
常见的一种情况是，可能需要有多个html的入口，比如有登陆页 和 项目主体页，可能就需要配置多个 HtmlWebpackPlugin，你可以这样进行配置，其中 chunks中的值跟entrys中对应：
entry: {
index: './src/main.js',
login: './src/login.js'
},
plugins: {
new HtmlWebpackPlugin({
file: 'login.html',
chunks: ['login'],
}),
new HtmlWebpackPlugin({
file: 'index.html',
chunks: ['index'],
}),
}
线上环境配置
我们需要在webpack.config.js中配置mode，移除 devtool、devServer、HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
index: './src/main.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
然后在 package.json 中配置 build
{
scripts: {
"build": "webpack"
}
}
当然你也可以在开发环境中使用类似的配置，取一个更准确的名字即可
{
scripts: {
"watch": "webpack --watch"
}
}
配置多入口的问题
在webpack中，使用HtmlWebpackPlugin对代码进行build常见的一种情形是：你有多个输出的html文件，比如登陆使用login.html 登陆成功后使用index.html。
这里的配置和容易出错的情形，看下面的示例配置会有什么问题
不指定chunk和file
output: {
path: '/build'
},
entry: {
index: './src/main.js',
login: './src/login.js'
},
plugins: {
new HtmlWebpackPlugin({
inject: true,
template: './public/login.html'
}),
new HtmlWebpackPlugin({
inject: true,
template: './public/login.html'
}),
}
问题1：没有指名要将哪个chunk注入到html，结果是两个chunk的引用都会出现在输出的index.html中
问题2：template代表源文件，并不能代表最终生成的文件（需要使用file指定），结果是两个HtmlWebpackPlugin注入了不同模板内容到build/index.html，后者覆盖前者
现象是，build/index.html的内容来自于 /public/login.html，并且引入的js文件，包含了 login.bundle.js 和 index.bundle.js。
另外也存在一个 build/login.html，内容跟 public/login.html 一模一样，猜想是Webpack操作包含了 ”拷贝 + inject/写文件“，其中从 public/login.html 到 build/login.html 的拷贝正常，但是 "inject/写文件"操作 被错误映射到了 /build/index.html 中。
修改后的配置
output: {
path: '/build'
}
entry: {
index: './src/main.js',
login: './src/login.js'
},
plugins: {
new HtmlWebpackPlugin({
inject: true,
template: './public/index.html',
file: 'index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
inject: true,
template: './public/login.html',
file: 'login.html',
chunks: ['login']
}),
}
chunks也制定了，输出文件也执行了，理论上应该正确了，结果发现 /build/index.html 和 /build/login.html中内容倒是都来自模板了，但是bundle都没有注入。
可以把filename和chunks分别注释掉，再进行build，会发现是chunks引起的。我们的代码必然是要使用chunks的， 因此找到了绕过它的方式。
曲线救国
首先配置inject为false我们再指定打包的js/css文件名的时候，不采用[hash]，而是直接使用 [name].bundle.js 和 [name].css的方式，再在 public/login.html 中 和 public/index.html 中引用即将被打包好的css/js即可。
