最近老有小伙伴问我webpack的问题 今天我们就来总结一下webpack是什么
webpack 是一个打包工具
作为初学者:
-
理解 webpack 的作用
-
改变前端开发的方式:传统=>工程化
-
在前端脚手架工具(vue-cli)中已经集成了 webpack
-
-
掌握 webpack 的基本使用
-
webpack.config.js :核心
-
mode: dev,test
-
entry
-
output
-
devtool
-
module=>rules:[{loader配置}]
-
plugins
-
devServer
-
optimization(必须是生产模式 mode:'production')才生效
-
-
loader: 帮助 webpack 处理非 js 模块
-
字体文件拷贝
-
图片(自动转 base64)
-
js 降级
-
编译.vue组件
-
-
plugin: 增强 webpack 的功能
-
把 css 提取到一个文件,压缩
-
用 HtmlWebpackPlugin 把指定模板.html 自动加载打包之后资源=》预览
-
webpack-dev-server 实时预览=》工程化=》开发调试
-
清空上次打包文件
-
-
优化webpack打包速度(build后的打的包)
-
开启多进程打包.
-
thread-loader(webpack4官方推荐)
-
-
-
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
// 创建一个 js worker 池
use: [
'thread-loader',
'babel-loader'
]
},
{
test: /\.s?css$/,
exclude: /node_modules/,
// 创建一个 css worker 池
use: [
'style-loader',
'thread-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]',
importLoaders: 1
}
},
'postcss-loader'
]
}
// ...
]
// ...
}
// ...
}
- 在webpack构建过程中,实际上耗费时间大多数用在 loader 解析转换以及代码的压缩中,HappyPack 可利用多进程对文件进行打包(默认cpu核数-1),对多核cpu利用率更高。HappyPack 可以让 Webpack 同一时间处理多个任务,发挥多核 CPU 的能力,将任务分解给多个子进程去并发的执行,子进程处理完后,再把结果发送给主进程。
-
合理利用缓存,使用
cache-loader
,HardSourceWebpackPlugin
或babel-loader
的cacheDirectory
标志 -
优化压缩时间
-
-
优化webapck启动项目时间
-
如果使用 chrome 浏览器,那么在开发环境下,其实可以关闭 babel 的转义:includes: []。还有可以添加 babel 的缓存:loader: "babel-loader?cacheDirectory=true"
-
配置exclude
-
exclude 是 loader 插件用来排除查找目录的,一般是 node_modules目录。exclude: /node_modules/
-
-
alias -alias 用来简化查找路径的,一般来说一些脚手架里面会默认配置 @代表 src目录,那么我们可以根据此分别配置不同的内容,来减少一级一级查找。
-
以上就是我个人对webpack的一个理解 希望可以帮助到你们