源码参考地址
my-webpack-learning
入门第一个案例
- 初始化项目：yarn init
$ 执行完后，当前文件夹下面会自动创建package.json文件。
- 安装本地webpack：yarn add webpack webpack-cli -D
- 创建src文件夹，创建index.js文件和index.html等文件
- 编译：npx webpack --entry=./src/index.js --output-filename=bundle.js --mode=development
- 测试
- 有用命令（帮助）：npx webpack -h
简化使用
- 默认配置文件：webpack.config.js
# 配置说明
- webpack-dev-server
$ 安装命令
yarn add webpack-dev-server -D
$ 配置启动路径（webpack-config.js）
+ 提示：**publicPath（资源请求路径）**
++ HTML相关
- 空字符串或者./开头的路径，是相对根项目来说
++ Host相关
- /开头的路径，是相对打包编译的路径来说
devServer: {
publicPath: '/',
port: 3000
}
webpack基本功
预处理器
CSS Loader（至少要配套style-loader一起使用）
$ 安装组件：yarn add css-loader style-loader -D
module: {
/* 从右往左依次解析，并且exclude优先 */
rules: [{
test: /\.css$/,
use: ['style-loader','css-loader'],
exclude: /node-modules/,
include: /(assets|src)/
}]
}
Babel Loader（主要功能是将ES6+等转换成ES5等）
$ 安装组件：yarn add babel-loader @babel/core @babel/preset-env -D
{
/* 处理ES6+ */
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [
['@babel/preset-env', {
/* 禁用模块语句的转化 */
modules: false
}]
]
}
}
}
File Loader
$ 安装组件：yarn add file-loader -D
{
/* 处理其他文件资源 */
test: /\.(png|jpe?g|gif|svg)$/,
use: {
loader: 'file-loader',
query: {
name: 'assets/img/[name].[ext]?[contentHash]'
}
}
}
进阶：自定义loader
$ 入门不算难，简单的可以参考[force-strict-loader]()，可以参考社区开源的部分，基本不需要做太多工作，拿过来即用。
样式处理
extract-text-webpack-plugin（Webpack<4.0）
mini-css-extract-plugin（Webpack >= 4.0）
$ 安装组件：yarn add mini-css-extract-plugin -D
$ 配置
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}, 'css-loader'],
exclude: /node-modules/,
}
$ 好处：
+ 这个能处理异步按需加载
sass
$ 安装组件
yarn add -D sass-loader node-sass
$ 安装配置类似上面
less
$ 安装组件
yarn add less-loader less -D
$ 安装配置类似上面
PostCSS（后续再补充）
代码分片（后续再补充）
CommonsChunkPlugin（webpack < 4.0）
SPlitChunks（webpack >= 4.0）
优化webpack
- vendor提取（主要是提取一些类库文件，相对不经常变动的静态资源）
$ 类似配置
entry: {
vendor: ['jquery']
}
- 压缩JavaScript
- UglifyJS (webpack < 4)
- terser （webpack >= 4）
$ mode=production，默认已经开启
- 压缩CSS
$ 安装组件
yarn add -D optimize-css-assets-webpack-plugin
$ 配置
optimization: {
minimize: true,
minimizer: [ new OptimizeCSSAssetsPlugin({
})],
}
bundle文件体积检控和分析
$ 安装组件
yarn add -D webpack-bundle-analyzer
打包优化
HappyPack（后续补充）
$ 安装组件
yarn add -D happypack
webpack-dashboard
size-plugin
HRM（后续补充）
遗留问题
- 搭建sentry平台
引用资源
- webpack中文
- 搭建sentry
