这可能是webpack最实用的文章了。抓紧上车。（二）

最新推荐文章于 2023-07-25 19:55:35 发布

ITzhongzi

最新推荐文章于 2023-07-25 19:55:35 发布

阅读量1.2k

点赞数

分类专栏：前端学习笔记文章标签： webpack

本文链接：https://blog.csdn.net/ITzhongzi/article/details/70217119

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

1.5. html-webpack-plugin

能够将index.html自动拷贝到dist目录，并在拷贝后的 html文件中引入bundle.js文件
下载npm包: npm install html-webpack-plugin --save-dev

修改 webpack.config.js文件

     // 添加的代码
     const htmlPlugin = require('html-webpack-plugin')

     const path = require('path')
     const obj = {
       entry: {
         app: './app.js'
       },
       output: {
         path: path.join(__dirname, './dist'),
         filename: 'bundle.js'
       },
       module:{
               loaders:[
                  {
                    test: /\.less$/,
                    loader: 'style-loader!css-loader!less-loader'
                  },
                  {
                    // 即匹配被引入到js中的图片
                    // 也匹配被引入到js中的css文件中使用的图片
                    test: /\.(jpg|jpeg|bmp|gif|png)$/,
                    // file-loader用于将 test规则匹配到的文件与js合并在一起。
                    loader: 'file-loader'
                  }
                ]
        },

        // 添加的代码
        plugins:[
        new htmlPlugin({
            // 以./index.html为模板
            template: './index.html',
            // 生成一个为为index.html文件到dist目录
            // 并且在生成的文件中引用bundle.js文件
            filename: 'index.html'
            })]
     }
     module.exports = obj

删除dist目录，一会再重新生成

打开cmd 执行 webpack

在浏览器中打开重新生成后 dist目录里的index.html查看效果

1.6. 整理一下文件结构

目前来说，文件结构太乱,我们稍微整理一下(这不是必需的,只是为了看起来舒服一些)

整理后的文件结构图:

这一步,并没有做太多的事情, 仅仅是通过文件夹将不同类型的文件做了分类
不过要注意，由于调整目标结构，所有代码中的路径也需要做些许修改

从webpack.config.js开始将app: './app.js' 改为 app: './src/js/app.js'
将template: './index.html' 改为 template: './src/index.html' 然后是app.js
将require('./style.less') 改为 require('../less/style.less')
最后是style.less
将

    .dy {
      background: url(./duoyun.png);
    }

    .qg {
      background: url(./qing.png);
    }

    .qw {
      background: url(./qiwen.png);
    }

    .xue {
      background: url(./xue.png);
    }

    .yu {
      background: url(./yu.png);
    }

    .mai {
      background: url(./mai.png);
    }

改为:

    .dy {
      background: url(../img/duoyun.png);
    }

    .qg {
      background: url(../img/qing.png);
    }

    .qw {
      background: url(../img/qiwen.png);
    }

    .xue {
      background: url(../img/xue.png);
    }

    .yu {
      background: url(../img/yu.png);
    }

    .mai {
      background: url(../img/mai.png);
    }

记得删除./src/index.html中对bundle.js引用的代码最后重新打包,打开index.html查看效果由于结果还是和之前一样，就不放上截图了!

在写代码里，如果引入的css文件中使用了图片，就需要在webpack.config.js中使用file-loader来处理。那么如果在css中引入了字体文件呢，是否也需要(是否也能)使用file-loader 来处理呢？？

1.7. 处理css中的字体文件

js中引入的css文件中，如果引用字体文件，也需要使用file-loader来处理通过npm 下载 bootstrap，引入它的样式，用于演示！
npm install bootstrap --save

修改 ./src/index.html , 添加一个bootstrap风格的按钮

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>url-loader演示</title>
    </head>
    <body>
      <button class="btn btn-success">哈哈</button>
      <div class="box">
        <ul>
          <li><i class="icon dy"></i>多云</li>
          <li><i class="icon qg"></i>晴</li>
          <li><i class="icon qw"></i>气温</li>
          <li><i class="icon xue"></i>雪</li>
          <li><i class="icon yu"></i>雨</li>
          <li><i class="icon mai"></i>霾</li>
        </ul>
      </div>
    </body>
    </html>

修改./js/app.js,在代码引入bootstrap的样式

    // 这里不加./前缀的话，会自动到`node_modules`目录中寻找 bootstrap
    require('bootstrap/css/bootstrap.css')
    require('../less/style.less')
    console.log('我是中国人，我爱自己的祖国!')
    console.log('我是中国人，我爱自己的祖国!')

打开cmd执行webpack进行打包,发现报错:

需要修改webpack.config.js 添加一些代码

    // 添加的代码---------
    const htmlPlugin = require('html-webpack-plugin')

    const path = require('path')
    const obj = {
      entry: {
        app: './src/js/app.js'
      },
      output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
      },
      module: {
        loaders: [{
          test: /\.less$/,
          loader: 'style-loader!css-loader!less-loader'
        },
        {
          // 即匹配被引入到js中的图片
          // 也匹配被引入到js中的css文件中使用的图片
          test: /\.(jpg|jpeg|bmp|gif|png)$/,
          // file-loader用于将 test规则匹配到的文件与js合并在一起。
          loader: 'file-loader'
        },

        // 添加的代码start--处理css文件和css时引用的字体文件================
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
        {
          test:/\.(svg|eot|ttf|woff|woff2)$/,
          loader: 'file-loader'
        }
        // 添加的代码end--处理css文件和css时引用的字体文件================

        ]
      },
      plugins: [
        new htmlPlugin({
          // 以./index.html为模板
          template: './src/index.html',
          // 生成一个为为index.html文件到dist目录
          // 并且在生成的文件中引用bundle.js文件
          filename: 'index.html'
        })
      ]
    }
    module.exports = obj

打开cmd 执行 webpack 进行打包

在浏览器中打开dist目录的index.html查看效果

此时,所有的在app.js中被引入的资源(字体,样式,图片等), 都被生成到了dist目录,只不过看起来感觉好像很乱似的，但是并不影响代码的执行, 对于浏览器,代码的结构并不影响执行，只需要在开发时的目录结构是清晰的就可以了。

1.7.1. 调整生成的dist目录文件结构

当然，我们也是可以做些小的调整，来让生成的代码的目录结构清晰些的修改webpack.config.js中的代码 file-loader部分：

    {
      test: /\.(jpg|jpeg|bmp|gif|png)$/,
      // ?name=img/[hash].[ext]意思是:
      // 图片会被生成到 ./dist/img目录下，这里的dist是obj.output.path的值
      // [hash] 表示是根据文件生成的唯一标识(字符串)
      // [ext]  表示原文件的的扩展名
      loader: 'file-loader?name=img/[hash].[ext]'
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    },
    {
      test:/\.(svg|eot|ttf|woff|woff2)$/,
      // 同上
      loader: 'file-loader?name=fonts/[hash].[ext]'
    }

删除dist目录,在cmd中重新执行webpack命令

下面是重新打包后生成的dist目录的文件结构

看起来，结构已经清晰好多好了。

1.7.2. 再次调整生成的dist目录文件结构

还可以进一步处理，让文件名能够和原来一样，也能避免浏览器对图片和字体文件缓存缓存
只需要对前面的webpack.config.js里的file-loader部分做进一步修改修改如下:

    {
      // 即匹配被引入到js中的图片
      // 也匹配被引入到js中的css文件中使用的图片
      test: /\.(jpg|jpeg|bmp|gif|png)$/,
      // file-loader用于将 test规则匹配到的文件与js合并在一起。

      // ?name=img/[hash].[ext]意思是:
      // 图片会被生成到 ./dist/img目录下，这里的dist是obj.output.path的值
      // [hash] 表示是根据文件生成的唯一标识(字符串)
      // [ext]  表示原文件的的扩展名
      // [name] 这里的[name]表示的是原文件名,表明生成到dist目录的
      // 文件的文件名，和src中原来文件的文件名相同
      // 例如:原来文件是: ./src/img/qing.png，就会生成到 ./dist/img/qing.png
      // 其实就是把文件拷贝过去了
      // 最后的?[hash]表示会在css中使用图片的位置，添加一个唯标识:
      // 例如:原来css中代码是: background:url('../img/qing.png')
      // 这里加上?[hash]就会变为: 
      // background:url('../img/qing.png?唯一标识')
      // 这里的唯一标识是file-loader计算生成，
      // 只要文件内容不变,唯一标识就不会变
      loader: 'file-loader?name=img/[name].[ext]?[hash]'
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    },
    {
      test:/\.(svg|eot|ttf|woff|woff2)$/,
      // 同上
      loader: 'file-loader?name=fonts/[name].[ext]?[hash]'
    }