Webpack入门到进阶
1. 概念
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle(包)。
2. 核心概念
entry:入口 ==> 指示 webpack 应该使用哪个模块开始进行打包
output: 输出(出口) ==> 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
loader: 因为webpack 自身只理解 `js和json文件`，loader 让 webpack 能够去处理那些非 `js和json 文件`
plugins: loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务,例如:`打包优化`、`压缩`和` 重新定义环境中的变量`
mode: 模式 ==> 设置当前环境为`development(开发环境)/production(生产环境)`,默认值为`production`
3. 开启项目
1. 初始化`package.json` ==> npm init -y/yarn init -y
2. 安装webpack
npm i webpack webpack-cli -D
3. 可在`package.json中配置启动指令`
"scripts":{
"start": "webpack"
}
4. 运行webpack在终端输入`npm start`
4. 使用webpack配置文件
1. 项目根目录下新建一个`webpack.config.js`
2. 项目目录结构
node_modules/
src/
js/
main.js
index.html
webpack.config.js
package.json
2. 基本配置:
// webpack的配置文件,运行webpack相关指令时，会先运行这个配置文件
// 因为webpack内部涉及到文件读写等相关操作，所以采用CommonJS语法
const { resolve } = require('path') // 引入node.js核心模块path，用来处理文件路径
module.exports = {
// 入口文件
entry: './src/js/main.js',
// 输出
output: {
filename: 'xh.js', // 输出后的文件名为 xh.js
path: resolve(__dirname, 'build') // 输出目录路径，目录名为build
},
// loader配置
module: {
rules: []
},
// 插件配置
plugins: [],
// 模式
mode: 'development'
}
5. 处理css文件
在rules中:
// 处理css文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
6. 处理less文件
// 处理less文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
7. 处理样式中图片资源
// 处理样式中图片资源
{
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader',
options: {
limit: 1024 * 16, // 小于16kb的图片会被转换成base64格式
// 输出的图片资源目录以及名字 [name] === 使用图片自身的名字 [ext] === 使用图片自身的扩展名
name: './imgs/[name].[ext]'
}
},
8. 处理html中图片资源
// 处理html中图片资源
{
test: /\.html$/,
loader: 'html-loader'
}
9. 处理字体图标
// 处理字体图标
{
test: /\.(eot|svg|ttf|woff)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
10. eslint的处理
// eslint的处理
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules
loader: 'eslint-loader',
options: {
// eslint options (if necessary)
fix: true // 启用ESLint自动修复功能
},
},
此时我们如果进行打包，会报一个警告，警告内容如下:
`Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
No ESLint configuration found`
意思是说我们没有配置eslint文件，我们在根目录下新建一个`.eslintrc`文件，然后配置一下,我们这里为了方便，就借助了一下别人写好的配置
{
"extends": "airbnb-base", // 继承别人写好的库
// 规则，0=>关闭,1=>警告,2=>报错
"rules": {
"import/prefer-default-export": 0,
"no-console": 0
}
}
11. css提取成单独文件
// 因为style-loader最终会以一个style标签的方式插入到我们的页面上，可能会造成闪屏现象，所以我们需要把css换成link的方式，也就是说需要把css样式提取成单独文件,我们需要借助到一个插件mini-css-extract-plugin
1. 引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
2. plugins中实例化
// 提取css成单独文件
new MiniCssExtractPlugin({
filename: 'css/[hash:10].css',
chunkFilename: '[id].css',
})
3. 替换掉style-loader，换成MiniCssExtractPlugin.loader
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
12. 路径问题
当我们把style-loader 替换成MiniCssExtractPlugin.loader，出现了路径问题，这时我们就需要把`相对路径变成绝对路径`,
// 输出
output: {
filename: 'js/xh.js', // 输出后的文件名为 build目录下js目录下的xh.js
path: resolve(__dirname, 'build'), // 输出目录路径，目录名为build
publicPath: '/' // 输出后的资源前面都会带一个/，解析成绝对路径
},
然后把之前写的`./`干掉,
之后我们通过`serve [打包后的目录名]`运行，它会针对我们的打包目录开启一个服务器，这样就可以解决问题了
13. css兼容性处理
1. yarn add postcss-loader -D/npm i postcss-loader -D
2. 例:
// 处理less文件
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-cssnext')(),
require('cssnano')()
]
}
},
'less-loader'
]
},
3. yarn add postcss-import postcss-cssnext cssnano -D或者npm
4. 在package.json中（package.json中去除注释）
"browserslist": [
"> 0.05%", // 大于市场上99.5的浏览器
"not ie <= 8" // 兼容ie8以上（如果可以）
]
14. 压缩css
1. 下载 optimize-css-assets-webpack-plugin
2. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
3. 插件中实例化
// 压缩css
new OptimizeCSSAssetsPlugin()
15. js兼容性处理
1. npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env
2. 配置loader
// js 兼容性处理
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
"ie": 8
},
"useBuiltIns": "usage", // 按需加载
"corejs": {
version: 3 // 指定corejs版本
}
},
]
]
}
}
}
}
`如果之前配置过eslint的话，需要在eslint配置里面加一个enforce:'pre'让eslint优先执行`
// eslint的处理
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules
loader: 'eslint-loader',
enforce: 'pre', // 优先执行
options: {
// eslint options (if necessary)
fix: true // 启用ESLint自动修复功能
},
},
16. 压缩html
在 HtmlWebpackPlugin配置对象中添加相关压缩代码
new HtmlWebpackPlugin({
template: resolve(__dirname, 'src/index.html'), // 以 ./src/index.html 为模板创建一个 新的html文件
// 压缩html
minify: {
collapseWhitespace: true, // 移除空格
removeComments: true, // 移除注释
removeRedundantAttributes: true, // 移除默认属性
removeScriptTypeAttributes: true, // 移除默认type/script
removeStyleLinkTypeAttributes: true, // 移除默认text/css
useShortDoctype: true // 使用html5
}
}),
17. devtool
源代码映射: `因为我们运行的是打包后的文件，是经过压缩的，所以如果出错了，通过控制台查看不到源代码的错误，所以我们需要这样一个配置，让我们即使打包后的文件出错，也能追踪到源代码`
推荐配置:
开发环境: devtool: 'cheap-module-eval-source-map' // 源代码映射
生产环境: devtool: 'source-map' // 源代码映射
18. 完成开发环境自动化配置
devServer: {
contentBase: resolve(__dirname, "build"), // 所有来自 build/ 目录的文件都做 gzip 压缩和提供 服务
compress: true, // 开启 gzip 压缩
port: 3000, // 端口3000
open: true, // 自动打开浏览器
hot: true // 开启HMR功能,只更新局部，不会刷新整个页面,js的HMR功能没有开启
},19. 区分开发环境和生产环境
/** 一般我们实际开发中都会有不同配置文件，然后根据package.json中不同的指令去运行不同的配置文件
我们在根目录下新建一个config目录,写两个配置文件，一个开发环境，一个生产环境
webpack.dev.js / webpack.prod.js
然后在package.json的scripts指令中
"scripts": {
"start": "webpack-dev-server --config ./config/webpack.dev.js", // 开发环境指令
"build": "webpack --config ./config/webpack.prod.js && serve build" // 生产环境指令
},
这样，我们就可以通过指令去运行不同环境的配置
开发环境指令: yarn start / npm start
生产环境指令: yarn build / npm run build
**/
20. 个人
具体参考在我的github地址: https://github.com/Zheng-Changfu/Personal-blog
看完觉得不错记得点个star哦~~
下次我们来深入webpack优化、以及在vue/react中应该怎样配置webpack
