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