webpack4 从零学习常用配置(小结)(5)

在该配置之前,可能需要 import Utility from '../../utilities/utility' 使用。配置之后就可以 import Utility from 'Utilities/utility' 使用,一来书写简洁,二来不用再考虑相对目录的层级关系。

extensions

如果引用文件时没有写后缀名,可以通过 extensions 来匹配。

resolve: { extensions: [".js", ".json"] },

clean-webpack-plugin

由于使用了 contentHash ,每次 build 时候都可能打包出不同的文件,因此要及时清理 dist 目录。安装 npm i clean-webpack-plugin -D ,然后在 build/webpack.prod.js 中配置

// 引入插件 const CleanWebpackPlugin = require('clean-webpack-plugin') // 增加配置 plugins: [ new CleanWebpackPlugin(), // 默认清空 output.path 目录

copy-webpack-plugin

build 时,将 src 目录下某个文件或者文件夹,无条件的拷贝到 dist 目录下,例如 src/doc 目录拷贝过去。安装 npm i copy-webpack-plugin -D,然后在 build/webpack.prod.js 中配置

// 引入插件 const CopyWebpackPlugin = require('copy-webpack-plugin') // 增加配置 plugins: [ new CopyWebpackPlugin([ { from: path.join(srcPath, 'doc'), // 将 src/doc 拷贝到 dist/doc to: path.join(distPath, 'doc') } ]),

bannerPlugin

代码的版权声明,在 build/webpack.prod.js 中配置即可。

plugins: [ new webpack.BannerPlugin('by github.com/wangfupeng1988 \r'),

总结

webpack 发展至今配置非常多,该视频中也没有全部讲解出来,只是一些实际开发中常用的。其他的配置可以去看官网文档。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/5cdca0fa010476b81a551752cd4c110a.html