开发环境配置
安装
webpack-dev-server
npminstall-Dwebpack-dev-server
在package.json的scripts中配置命令
{scripts:{"start":"webpack-dev-server--open",}}
为了让我们bundle文件直接注入到默认的html文件中，我们需在配置中引入html-webpack-plugin
npminstall-Dhtml-webpack-plugin
修改配置webpack.config.js，
constHtmlWebpackPlugin=qui(html-webpack-plugin);module.exports={mode:development,entry:{index:./src/main.js,},output:{filename:[name].bundle.js,path:path.solve(__dirname,dist)},devtool:inline-source-map,devServer:{contentBase:./dist},plugins:[newHtmlWebpackPlugin({title:MyApplication}),],}
在
npmrunstart
启动过后，就可以正常访问项目地址了。
注：这时候会发现它的输出内容默认index.html并不会出现在文件夹中，可以理解为webpack-dev-server是动态的创建内容然后作为结果返回给浏览器的。
常见的一种情况是，可能需要有多个html的入口，比如有登陆页和项目主体页，可能就需要配置多个HtmlWebpackPlugin，你可以这样进行配置，其中chunks中的值跟entrys中对应：
entry:{index:./src/main.js,login:./src/login.js},plugins:{newHtmlWebpackPlugin({file:login.html,chunks:[login],}),newHtmlWebpackPlugin({file:index.html,chunks:[index],}),}
线上环境配置
我们需要在webpack.config.js中配置mode，移除devtool、devServer、HtmlWebpackPlugin
constHtmlWebpackPlugin=qui(html-webpack-plugin);module.exports={mode:production,entry:{index:./src/main.js,},output:{filename:[name].bundle.js,path:path.solve(__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:{newHtmlWebpackPlugin({inject:true,template:./public/login.html}),newHtmlWebpackPlugin({inject:true,template:./public/login.html}),}
问题1：
没有指名要将哪个chunk注入到html，结果是两个chunk的引用都会出现在输出的index.html中
问题：
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:{newHtmlWebpackPlugin({inject:true,template:./public/index.html,file:index.html,chunks:[index]}),newHtmlWebpackPlugin({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即可。