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

前言

由于 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 ：

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

六、url-loader

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

file-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: "/"//一般情况设置总的路径即可
    }
}