Webpack 打包其他资源(详解)

打包其他资源

需要安装的

npm install --save-dev html-webpack-plugin 处理html
npm i url-loader file-loader -D处理图片

打包HTML资源

需要安装

 npm install --save-dev html-webpack-plugin

下载完还需要引用

const HtmlWebpackPlugin = require('html-webpack-plugin');

自动会新建一个index.html文件

打包图片资源

新建images文件,里面放入图片，

然后在index.less文件里输入css代码,在index.html中输入

   <div id="a"></div>
   <div id="b"></div>
   <div id="c"></div>

继续配置webpack.config.js

{
        test: /\.(png|jpe?g|gif|svg)$/,

        loader: 'url-loader',
        options: {
          // 图片大小小于 8kb，就会被 base64 处理
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          // 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
          // 解析时会出问题：[object Module]
          // 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
          //注意目前新版本已经处理好了,默认都给关闭掉了
          // esModule: false,
          // 给图片进行重命名
          // [hash:10]取图片的 hash 的前 10 位
          // [ext]取文件原来扩展名
          name: '[hash:10].[ext]'
        }

      },

在这直接打包会报错，需要下载

npm i url-loader  file-loader -D

但是在这里有一个注意点:如果直接在index.html文件内输入

<img src="./images/3.jpeg" alt="1.gpg">

图片会显示不出来，我们需要在webpack.config.js中再配置
问题：默认处理不了html中img图片

 {
        test: /\.html$/,
        // 处理 html 文件的 img 图片
        //（负责引入 img，从而能被 url-loader 进行处理）
        loader: 'html-loader'
      }

打包完会被解析成哈希模式

打包其他资源

可到阿里巴巴矢量图图标库下载几个矢量图，iconfont.css 和 字体文件 来源于 阿里iconfont
加入购物车后，直接点下载代码

在html文件输入

    <span class="iconfont icon-iconfont-zan"></span>
    <span class="iconfont icon-dianhua"></span>
    <span class="iconfont icon-mimakejian"></span>
    <span class="iconfont icon-xiaoxi"></span>

创建文件：

配置webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      //打包其他资源（除了html/js/css资源以外的资源）
      {
        //排除css/js/html资源
        exclude:/\.(css|js|html)$/,
        loader:'file-loader'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
     template:'./src/index.html'
    }),
  ],
 
};

最后打包就ok了

总结

1.要支持CommonJS模块化规范，所以要求打包后的最后结果也遵守该规则
2.Npm模块使用者的环境是不确定的，很有可能并不支持ES6，所以打包的最后结果应该是采用ES5编写的。并且如果ES5是经过转换的，请最好连同SourceMap一同上传。