问题
image.png
需要解决的几个问题：
- 这里的index.html文件是在根路径下，理论上放在src文件夹下更合理，标明这个文件也是有可能发生变化的。目前在最后生成的dist文件中，是没有index.html的，如果我们能把index.html放到dist中，dist文件夹就包含了部署所需要的所有文件。
- 目前我们是手动在index.html中加上 bundle.js 和 main.css 的。合理的做法是我们应该有一个工作流能够自动为 index.html 加上这两个文件。
- 如果我们在index.html中使用了图片，并在src文件夹中存储了这些图片，这样build之后的代码是不能正常工作的，因为我们并没有把图片文件拷贝到dist文件夹下。
首先，项目代码结构和内容调整如下：
- 把index.html从根路径移到src文件夹下
- src里添加img文件夹
- index.html中引入图片文件，删除了前面手动引入的js和css 文件
image.png
目前的webpack工作流还不能处理这样的改变，我们需要对webpack的配置相应的处理。
- 添加新的npm 包
npm install --save-dev html-loader html-webpack-plugin file-loader
-
html-loader: 处理html文件
-
html-webpack-plugin: 根据源html模板重新生成html文件（并不是单纯的copy)
-
file-loader : 用来复制一些文件，比如本项目中的图片文件
-
package.json 文件
var HtmlWebpackPlugin=
...
module:{
rules:[
...
{
test：/\.html$/,
use:['html-loader'] //extract any html it finds and store it as text.
},
{
test:/\.(jpg|png)$/,
use:[
{
loader:'file-loader',
option:{
name:'[name].[ext]',
outputPath:'img/', // 默认情况下，它会输出到webpack配置的output路径下
publicPath:'img/' , // outputPath is for copying，publicPath keeping the correct reference in the places where we use this.
}
}
]
}
]
},
plugins:[
...
new HtmlWebpackPlugin({
template:'src/index.html'
//没有配置信息的话，会默认创建一个新的HTML文件
}) // 创建完html后，会在自动在页面上添加上我们创建的bundle,比如这个项目中的 bundle.js 和 main.css.
]
...
- 修改output 中的publicPath
前面index.html是位于根路径下的，所以对它来说，要访问dist中的bundle.js和main.css, publicPath是 /dist. 但是现在index.html也在dist里面，所以相对路径应该 /, 我们只需要注释掉 publicPath 配置就好了。 - dist 文件
默认情况下，我们只能往dist文件的内容会一直存在，如果我们的文件重命名了，旧的文件仍会一直存在。我们希望在每次build流程开始前，先移除dist里面的所有文件。
* npm install --save-dev clean-webpack-plugin
* package.json
var CleanWebpackPlugin=require('clean-webpack-plugin');
plugins:[
...
new CleanWebpackPlugin(['dist']);
]
网友评论