Webpack小结

webpack设置不打包文件

步骤

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

复制文件

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

安装依赖

npm i copy-webpack-plugin -s

引入依赖

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

const CopyWebpackPlugin = require(‘copy-webpack-plugin’)

webpack-plugins配置

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

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

引入文件

在html中引入不打包的配置文件，一般不打包文件都放在根目录下的static文件夹中，打包后放在dist文件夹。在html文件中使用script标签引用即可。
注意
不要使用require或者import的方式引入文件，否则该文件就会参与打包，从而使打包后修改配置的操作失效。