前端工程化之：webpack2-1(常用扩展)

目录

前言

一、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 #<script src="../scripts/main.js" ></script>

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

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

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

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