前端工程化之：webpack1-12(常用扩展)

目录

前言

一、CleanWebpackPlugin

二、HtmlWebpackPlugin

三、CopyPlugin

四、webpack-dev-server

五 、file-loader

六、url-loader

七、路径问题

 

前言

由于 webpack 、 webpack-cli 、 webpack-dev-server 会存在版本不兼容问题，所以这里使用的版本如下： 

"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }

---

一、CleanWebpackPlugin

 每次打包后不会再次生成新的文件，而是对原来打包的文件进行更新。

 webpack.config.js ：

var { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "[name].[chunkhash:3].js"
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
}

二、HtmlWebpackPlugin

 可以自动生成 html 文件引用打包后的文件。

 webpack.config.js ：

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: {
        home: "./src/index.js",//home由index打包来
        a: "./src/a.js"
    },
    output: {
        filename: "scripts/[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({//可以每个文件引用不同的包
            template: "./public/index.html",//自动生成的html文件模板采用
            filename: "home.html",
            chunks: ["home"]//引用的js包
        }),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "a.html",
            chunks: ["a"]
        })
    ]
}

三、CopyPlugin

复制静态文件。 

 webpack.config.js ： 

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:3].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new CopyPlugin([
            { from: "./public", to: "./" }//将public中的文件复制到出口文件夹例（默认dist）
        ])
    ]
}

四、webpack-dev-server

开发服务器：搭建一个本地开发环境，直接运行到浏览器，不会每次运行都打包。

默认运行本地地址：http://localhost:8080/

// 安装插件
npm i -D webpack-dev-server

// 运行命令
npx webpack-dev-server

配置：

1.  port：运行的端口号；
2.  open：开启服务器后自动打开浏览器窗口发访问地址；
3.  index：默认值 "index.html" ；
4.  proxy：配置代理；

5.  stats：配置控制台输出内容。

五 、file-loader

 file-loader 可以将打包过程中识别不了的文件进行处理，生成依赖的文件到输出目录，然后将模块文件设置为：导出一个路径。

 src/index.js ：

const png = require("./assets/backg.png").default;
let num = Math.random();
console.log(num, "--");
if (num > 0.5) {
  var img = document.createElement("img");
  img.src = png;
  document.body.appendChild(img);
}

 webpack.config.js ： 

module: {
    rules: [
      {
        test: /\.(png)|(jpg)|(gif)$/,
        // use: ["file-loader"], // 第一种写法
        use: [
          {
            loader: "file-loader", // loader插件名
            options: {
              name: "imgs/[name].[hash:5].[ext]", // 生成文件名
            },
          },
        ], // 第二种写法
      },
    ],
  },

  file-loader 原理： 

function loader(source){
	// source：文件内容（图片内容 buffer）
	// 1. 生成一个具有相同文件内容的文件到输出目录
	// 2. 返回一段代码   export default "文件名"
}

六、url-loader

将依赖的文件转换为：导出一个 base64 格式的字符串。

  src/index.js ：

import png from "./assets/backg.png"; // url-loader
let num = Math.random();
console.log(num, "--");
if (num > 0.5) {
  var img = document.createElement("img");
  img.src = png;
  document.body.appendChild(img);
}

  webpack.config.js ： 

module: {
    rules: [
      {
        test: /\.(png)|(jpg)|(gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              // limit: false, // 默认为false，为false时不限制任何大小，所有经过loader的文件进行base64编码返回
              limit: 10 * 1024, // 只要文件不超过10*1024字节，则使用base64编码，否则，交给file-loader处理
              name: "imgs/[name].[hash:5].[ext]", // file-loader处理
            },
          },
        ],
      },
    ],

 url-loader 原理： 

function loader(source){
	// source：文件内容（图片内容 buffer）
	// 1. 根据buffer生成一个base64编码
	// 2. 返回一段代码   export default "base64编码"
}

七、路径问题

在使用 file-loader 或 url-loader 时，可能会遇到一个非常有趣的问题：

比如，通过 webpack 打包的目录结构如下：

dist
    |—— img
        |—— a.png  #file-loader生成的文件
    |—— scripts
        |—— main.js  #export default "img/a.png"
    |—— html
        |—— index.html #

这种问题发生的根本原因：模块中的路径来自于某个 loader 或 plugin ，当产生路径时， loader 或 plugin 只有相对于 dist 目录的路径，并不知道该路径将在哪个资源中使用，从而无法确定最终正确的路径。

面对这种情况，需要依靠 webpack 的配置 publicPath 解决。

module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:5].js",
        publicPath: "/"//一般情况设置总的路径即可
    }
}

有些插件会自己内置 publicPath 属性进行配置。