title: 前端工程化探索--webpack
category: Web
tag: webpack
date: 2019-07-16
主标题：前端工程化--webpack
副标题：webpack4 从入门到放弃
缘起
我放弃手把手教了，很难控制好代码的篇幅。接下来的内容你只需要浏览，理解概念即可，希望能辅助你搭好webpack
现代化擅长把简单事情搞复杂的前端工程师离不开构建工具，以前是 grunt（我差点就用过），gulp用了好久（我好想写过这篇文章），现在使用webpack。
安装和配置
安装webpack
先本地安装 webpack@4，没必要全局安装。
npm init -y
npm i webpack webpack-cli -D
# 未来npm i webpack@5 -D
配置文件是一个前端折腾工程师过不去的坎。创建 webpack.config.js，在 package.json 添加字段，这样就使用项目内的webpack了。
package.json新增：
{
"scripts":{
"start": "webpack --config webpack.config.js"
}
}
webpack.config.js 中指定入口entry和出口output
const path = require("path")
module.exports = {
entry:"./app.js",
output:{
filename: "main.js",
path: path.resolve(__dirname, "dist")
}
}
这样就可以通过 npm run start 调用webpack了。
安装npm包
接下来说如何管理 js，样式、图片、字体等文件。
别说话，先吃下这一坨npm包：
# 基础 loaders
yarn add -D style-loader css-loader file-loader html-loader cache-loader url-loader
# 基础 plugins
yarn add -D html-webpack-plugin html-webpack-template mini-css-extract-plugin
# 使用 babel 处理 js 兼容性
yarn add -D @babel/core @babel/preset-env babel-loader core-js regenerator-runtime
# 使用 less autoprefixer 处理 css
yarn add -D less less-loader postcss-loader postcss-preset-env
# 处理 图片 字体 等资源
# yarn add -D img-loader
这些是什么：
- loader 不需要引入，直接使用
- style-loader 提取css到页面中以style形式注入。好处是方便热重载好调试
- css-loader 识别css语法
- html-loader 把内存里的html作为字符串输出
- file-loader 解析 require 和 import 导入的资源并输出结果
- url-loader 把一下小资源转换成base64
- cache-loader 缓存loader结果
- plugin 需要声明引入
- html-webpack-plugin 方便创建html文件
- html-webpack-template 基于 html-webpack-plugin 升级
- mini-css-extract-plugin 提取css成文件
- 处理js
- @babel/core 核心库
- @babel/preset-env 预设环境变量
- babel-loader 处理js文件
- core-js regenerator-runtime 处理js兼容性问题
- 处理css
- less less-loader 我偏爱less，引入less
- postcss-loader postcss-preset-env 引入postcss处理css
在 webpack.config.js 里添加 rule 规则。如果直接贴代码，太长一大坨，分开描述：
修改 webpack.config.js 中新增：module:{ rules: [] }
处理CSS
在处理webpack之前需要创建相关配置文件：
-
.browserslistrc：
> 1%
not ie <= 8
.postcssrc.js
module.exports = {
plugins: [
require("autoprefixer")({
flexbox: "no-2009"
})
]
};
module.rules[0] 处理 css
module.rules[0] = {
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: true
}
},
"postcss-loader"
]
};
如果要提取成css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.rules[0] = {
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../" //处理成相对路径
}
},
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"postcss-loader"
]
};
module.plugins = [
new MiniCssExtractPlugin({
filename: "css/[name].css"
})
]
处理Less
和处理 css 差不多。
注入方式
module.rules[1] = {
test: /\.less$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: true
}
},
"postcss-loader",
"less-loader"
]
};
外置
module.rules[1] = {
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../"
}
},
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"postcss-loader",
"less-loader"
]
};
// 记得引入plugin
处理 html
因为我想自定义 html文件，比如引入常用的类库，引入自己的统计代码。
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.plugin[0] = new HtmlWebpackPlugin({
title: "自定义标题",
filename: "index.html",
template: path.resolve(__dirname, "../rename/index.html") //提供了html文件的路径
});
处理js
这里主要考虑引入babel，关于babel，我之前写过一篇文章，感兴趣可以找找。
在开发阶段，其实没必要使用bebel，或者把babel的浏览器兼容性调高，最后生产模式再降下来。减少开发时候的计算。
module.rulses[2] = {
test: /\.jsx?$/,
loader: "babel-loader"
};
处理图片
我们还可以自动压缩图片，开发阶段不用管，生产模式压一下。但相对应的包安装起来很费劲，更倾向于外置压缩。所以我刚才没有放到前面的包列表里：
npm i -D img-loader imagemin imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant
module.rules[3] = [
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'url-loader?limit=10000',
'img-loader'
]
}
]
module.rules[3] = {
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "url-loader",
options: {
limit: config.urlLoader.limit,
useRelativePath: true,
outputPath: "./img",
pulbicPath: "./dist/img"
}
},
{
loader: "img-loader",
options: {
plugins: [
require("imagemin-mozjpeg")({
quality: config.imgLoader.jpgQuality
}),
require("imagemin-pngquant")({
quality: config.imgLoader.pngQuality
}),
require("imagemin-gifsicle")({
optimizationLevel: config.imgLoader.gifQuality
})
]
}
}
]
};
处理字体
module.rules[2] = {
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: "url-loader",
options: {
limit: 80000,
name: "fonts/[name].[hash:8].[ext]"
}
}
]
};
以上就处理了老三样的处理，接下来说提升幸福感的工具。
处理热重载
我们都喜欢边写边看效果。
这就需要安装额外一些内容，安装一个服务器：
npm i -D webpack-dev-server
修改 package.json :
{
"scripts": {
"dev": "webpack-dev-server --open"
}
}
修改配置：
const webpack = require("webpack")
module.exports = {
devServer:{
host: "0.0.0.0",
port: 3000,
progress: true,
contentBase: distPath,
watchContentBase: true,
hot: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
}
检测到文件变动就自动刷新，启动了一个服务器，这个服务器基于express，关于express我也写过一篇文章，感兴趣可以找找。
处理生产和开发环境
刚才一直提到开发和生产环境，所以大众倾向于把 webpack.config.js分割成三个文件：
webpack.common.jswebpack.dev.jswebpack.prod.js
然后使用这个插件来完成合并操作：
npm i -D webpack-merge
如何使用：
const merge = require("webpack-merge");
module.exports = merge(common, {})
会自动合并两个配置项
分割完代码，重新组织 package.json
{
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
}
}
清理 /dist 文件夹
有时候会多次打包，需要先删除之前打包的东西。我们可以引入一个插件来完成操作：
yarn add -D clean-webpack-plugin
config = {
plugins: [
new CleanWebpackPlugin(),
]
}
追踪数据
了解每个资源都变成了什么。
yarn add -D webpack-manifest-plugin
goto :Webpack Manifest Plugin
工具优化
使用预设模式
webpack4新增了一个 mode 模式，可以设置为development，production
这样会自动启用一些优化措施。
这里应该有一张图来说明做了哪些优化，如果没有就是找不着了
我们在 dev.confg 和 prod.config 文件里设定不同的mode
使用source map
source map 有一些选项。这里使用 inline-source-map选项。
开发时候使用 devtool: "inline-source-map"
生产时候使用 devtool: "source-map"
使用规范和格式化
先放着不动
处理 less 时候
yarn add -D less less-loader stylelint stylelint-webpack-plugin postcss-preset-env postcss-loader mini-css-extract-plugin
- stylelint stylelint-webpack-plugin 规范css文件
- mini-css-extract-plugin css打包
