4W字长文带你深度解锁Webpack系列(进阶篇)

本文主要是介绍4W字长文带你深度解锁Webpack系列(进阶篇)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

三篇长文，4W余字，带你解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。

本文是第二篇，如果你还没有阅读《4W字长文带你深度解锁Webpack系列(基础篇)》，建议阅读之后，再继续阅读本文。

本文会引入更多的 webpack 配置，如果文中有任何错误，欢迎在评论区指正，我会尽快修正。 webpack 优化部分放在了下一篇。

推荐大家参考本文一步一步进行配置，不要总是想着找什么最佳配置，掌握之后，根据自己的需求配置出来的，就是最佳配置。

本文对应的项目地址(编写本文时使用) 供参考：github.com/YvetteLau/w…

1. 静态资源拷贝

有些时候，我们需要使用已有的JS文件、CSS文件（本地文件），但是不需要 webpack 编译。例如，我们在 public/index.html 中引入了 public 目录下的 js 或 css 文件。这个时候，如果直接打包，那么在构建出来之后，肯定是找不到对应的 js / css 了。

public 目录结构

├── public
│   ├── config.js
│   ├── index.html
│   ├── js
│   │   ├── base.js
│   │   └── other.js
│   └── login.html
复制代码

现在，我们在 index.html 中引入了 ./js/base.js。

<!-- index.html -->
<script src="./js/base.js"></script>
复制代码

这时候，我们 npm run dev，会发现有找不到该资源文件的报错信息。

对于这个问题，我们可以手动将其拷贝至构建目录，然后在配置 CleanWebpackPlugin 时，注意不要清空对应的文件或文件夹即可，但是如若这个静态文件时不时的还会修改下，那么依赖于手动拷贝，是很容易出问题的。

不要过于相信自己的记性，依赖于手动拷贝的方式，大多数人应该都有过忘记拷贝的经历，你要是说你从来没忘过。

幸运的是，webpack 为我们这些记性不好又爱偷懒的人提供了好用的插件 CopyWebpackPlugin，它的作用就是将单个文件或整个目录复制到构建目录。

首先安装一下依赖：

npm install copy-webpack-plugin -D
复制代码

修改配置(当前，需要做的是将 public/js 目录拷贝至 dist/js 目录)：

//webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    //...
    plugins: [
        new CopyWebpackPlugin([
            {
                from: 'public/js/*.js',
                to: path.resolve(__dirname, 'dist', 'js'),
                flatten: true,
            },
            //还可以继续配置其它要拷贝的文件
        ])
    ]
}
复制代码

此时，重新执行 npm run dev，报错信息已经消失。

这里说一下 flatten 这个参数，设置为 true，那么它只会拷贝文件，而不会把文件夹路径都拷贝上，大家可以不设置 flatten 时，看下构建结果。

另外，如果我们要拷贝一个目录下的很多文件，但是想过滤掉某个或某些文件，那么 CopyWebpackPlugin 还为我们提供了 ignore 参数。

//webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    //...
    plugins: [
        new CopyWebpackPlugin([
            {
                from: 'public/js/*.js',
                to: path.resolve(__dirname, 'dist', 'js'),
                flatten: true,
            }
        ], {
            ignore: ['other.js']
        })
    ]
}
复制代码

例如，这里我们忽略掉 js 目录下的 other.js 文件，使用 npm run build 构建，可以看到 dist/js 下不会出现 other.js 文件。 CopyWebpackPlugin 还提供了很多其它的参数，如果当前的配置不能满足你，可以查阅文档进一步修改配置。

2.ProvidePlugin

ProvidePlugin 在我看来，是为懒人准备的，不过也别过度使用，毕竟全局变量不是什么“好东西”。ProvidePlugin 的作用就是不需要 import 或 require 就可以在项目中到处使用。

ProvidePlugin 是 webpack 的内置插件，使用方

这篇关于4W字长文带你深度解锁Webpack系列(进阶篇)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！