webpack小概念&&webpack插件总结
在webpack中,只能读取javascript和json文件,那么我们项目中的css,img等等在打包构建的时候怎么办呢?
webpack给我们提供了一个loader模块去处理,它可以让webpack去处理其他类型的文件然后转为可被读取的有效模块,让程序正常运行~
当使用loader模块处理之后,你发现每一次打包都需要重复进行某些操作。
例如:每次打包都生成不同的dist目录,而你就只是需要最新的那一个dist文件,这个时候,我们就需要插件(plugin)来帮我们做一些处理了。(vue脚手架同样帮我们做了相对应处理)
插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。
上面这句话是webpack中文文档对于插件(plugin)的一个概念描述。
以上是loader和plugin的一些概念。
接下来先讲讲webpack的loader模块
在loader中,有test和use两个属性。
test:其实就是让你告诉webpack打包构建的时候遇到哪些类型的文件需要进行处理或者转换。
use:告诉webpack使用哪个loader模块对上面test指定的文件类型进行处理。
举个小栗子
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}
]
像上面这一小块代码,其实就是在webpack的module中配置一下正则,告诉webpack当你打包编译遇到.vue文件的时候使用vue-loader这一个loader模块进行转换处理。当然options是一些简单的配置项。(里面其实就是通过判断开发环境还是生产环境执行相对应规则)
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
}
再来看一个,像这一个的话其实就是告诉webpack打包编译的时候,遇到.js的文件使用babel-loader模块去转换。然后比上面多了一个include,其实就是告诉webpack,哪些目录中的 .js 文件需要进行 babel-loader。
更多具体的配置可以看webpack中文文档:https://v4.webpack.docschina.org/concepts/loaders
接下来介绍一下几个webpack插件:
1、html-webpack-plugin
主要作用是生产html文件。在entry配置中配置入口模板,编译打包后的内容会在此模板上插入内容。
配置项inject:
默认值是true:表示script标签将插入在body底部
值为body:效果和true一样。
值为head:script 标签位于 head 标签内
值为false:不插入生成的 js 文件,只是单纯的生成一个 html 文件
2、HotModuleReplacementPlugin
这是一个热更新模块,依赖于webpack-dev-server。
webpack-dev-server打包时候会更新打包文件或者刷新整个页面,而HotModuleReplacementPlugin可以做到只修改改变的那部分。
//用法:
plugins: [
new webpack.HotModuleReplacementPlugin()
]
3、clean-webpack-plugin
会根据 output.path 自动清理项目生成的 bundle 文件。
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, '/index.html'),
}),
new CleanWebpackPlugin(), // 所要清理的文件夹名称
]
4、mini-css-extract-plugin
对每个包含 css 的 js 文件都会创建一个 CSS 文件,提取为独立的css文件。
这个插件应该只用在生产环境配置,并且在 loaders 链中不使用 style-loader, 而且这个插件暂时不支持 HMR
5、optimize-css-assets-webpack-plugin
作用是打包压缩减少css的体积。
const OptimizeCSSPlugin= require(“optimize-css-assets-webpack-plugin”) // 压缩css代码
optimization: {
minimizer: [
// 压缩css
new OptimizeCSSPlugin({})
]
}
6、DefinePlugin
可以通过DefinePlugin定义一些全局变量,
plugins: [
new webpack.DefinePlugin({
'process.env': ABCD
})
]
在node环境中,也可以通过process.env定义和拿到全局变量。
在vue和react中,可以通过.env.development和.env.production 去定义,然后通过process.env使用全局变量。
7、DLLPlugin
这个插件件会生成一个名为 manifest.json 的文件,创建一个只有 dll 的bundle,将DLLReferencePlugin 映射到相关的依赖上。
new webpack.DllPlugin({
path: path.join(dllDirPath, '[name].manifest.json'),
name: '_dll_[name]', // 和library 一致,输出的manifest.json中的name值
}),
更多插件可以查看webpack官方文档:https://v4.webpack.docschina.org/plugins
以上仅为个人见解,有不对的欢迎交流指出~