本文主要是介绍前端工程化之：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配置：
- port：运行的端口号；
- open：开启服务器后自动打开浏览器窗口发访问地址；
- index：默认值 "index.html" ；
- proxy：配置代理；
-
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 属性进行配置。
这篇关于前端工程化之：webpack2-1(常用扩展)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
