10处理html中的图片问题

webpack中是不喜欢你使用标签来引入图片的，但是我们作前端的人特别热衷于这种写法，国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题

项目安装：npm install –save-dev webpack

全局安装：npm install -g webpack

** webpack不鼓励全局安装webpack,如果在终端中用webpack进行打包项目，就会出现不是内部命令或者外部命令。

• 需要配置package.json里面的script选项，我们以前的课程已经学习了配置 webpack-dev-server命令，在这个命令下面我们再加一个build命令进行打包项目使用

  "scripts": {
    "server": "webpack-dev-server --open",
    "build":"webpack"
  },

删除dist目录，npm run build进行打包

打包html中的图片：

1. 现在进行==npm run build==打包图片并没有放入dist/images目录下,需要配置url-loader选项

   module:{
           rules: [
               {
                 test: /\.css$/,
                 use: extractTextPlugin.extract({
                   fallback: "style-loader",
                   use: "css-loader"
                 })
               },{
                  test:/\.(png|jpg|gif)/ ,
                  use:[{
                      loader:'url-loader',
                      options:{
                          limit:5000,
                          outputPath:'images/',
                      }
                  }]
               }
             ]
       },

2. 删除dist目录，进行 npm run build 打包，可以把图片打包到images文件夹下

3. 在src目录下的index.html中插入图片
   

   <div><img src="./images/10.jpg"></div>

4. 安装==html-withimg-loader==解决html中的问题
   npm install html-withimg-loader –save

5. 配置loader(webpack-config.js)

   {
       test: /\.(htm|html)$/i,
        use:[ 'html-withimg-loader'] 
   }

6. 再次进行打包，在dist/images目录下出现img图片

7. npm run server 查看浏览器