webpack初学者系列五: html + image load

问题

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']);
]