C/C++教程

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

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

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

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

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

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

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

1. 静态资源拷贝

有些时候,我们需要使用已有的JS文件、CSS文件(本地文件),但是不需要 webpack 编译。例如,我们在 public/index.html 中引入了 public 目录下的 jscss 文件。这个时候,如果直接打包,那么在构建出来之后,肯定是找不到对应的 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 时,注意不要清空对应的文件或文件夹即可,但是如若这个静态文件时不时的还会修改下,那么依赖于手动拷贝,是很容易出问题的。

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

050a81c7-59e4-4596-b08f-62cefce353d0.jpg

幸运的是,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 的作用就是不需要 importrequire 就可以在项目中到处使用。

ProvidePluginwebpack 的内置插件,使用方

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