webpack设置不打包文件

一、需求

要实现webpack打包后，一个全局配置文件不被打包。最终目的是我们可以在打包后的文件中修改这个文件（比如配置全局请求url前缀等等）。

要实现这个功能需要两步操作。

• 1、 复制不打包文件
• 2、 引入文件

二、复制文件

这里的复制文件指将无需打包的文件复制至打包后的静态文件

1. 安装依赖

npm i copy-webpack-plugin -s

2. 引入依赖

需要在webpack配置文件中引用并配置。

    const CopyWebpackPlugin = require('copy-webpack-plugin')

3. webpack-plugins配置

以下代码需放在webpack配置的plugins数组中

new CopyWebpackPlugin([
    {
        from: resolve(__dirname, './static'), // 不打包直接输出的文件
        to: 'static', // 打包后静态文件放置位置
        ignore: ['.*'] // 忽略规则。（这种写法表示将该文件夹下的所有文件都复制）
    }
]),

三、引入文件

在html中引入不打包的配置文件，一般不打包文件都放在根目录下的static文件夹中，打包后放在dist文件夹。在html文件中使用script标签引用即可。

注意

不要使用require或者import的方式引入文件，否则该文件就会参与打包，从而使打包后修改配置的操作失效。

有什么问题欢迎留言~

END