Webpack5(从入门到精通)
这里写目录标题
-
- 1、webpack 初体验
-
-
- 全局安装webpack
-
- 2.打包样式资源
-
-
- 创建webpack.config.js文件（配置文件）
-
- 3.打包html资源
-
-
- webpack.config.js文件（配置文件）
-
- 4.打包图片资源
-
-
- webpack.config.js文件（配置文件）
-
- 5.打包其他资源
-
-
- webpack.config.js文件（配置文件）
-
- 6.devServer
-
-
- webpack.config.js文件（配置文件）
-
- 7.提取css成单独文件
-
-
- webpack.config.js文件（配置文件）
-
- 8.css兼容
-
-
- package.json增加
- webpack.config.js文件（配置文件）
-
- 9.css压缩
- 10.eslint 语法检查
- 11.js，html压缩只要将mode改为production就会自动压缩
- 12.开发性能提升：HMR:热模块替换
- 13.开发性能提升：source-map
- 13.生产性能提升：tree-shaking（去除没用到的代码）
1、webpack 初体验
全局安装webpack
npm i webpack webpack-cli -g
/*
index.js:webpack 入口起点文件
1.运行指令：
开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
2.结论：
1.webpack能处理js/json资源，不能处理css/img等其他资源
2.生产环境比开发环境多压缩一个js文件
*/
function add(x,y) {
return x+y;
}
add(1,2)
执行打包 这个文件，打包成功
总结： index.js:webpack 入口起点文件
1.运行指令：
开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
2.结论：
1.webpack能处理js/json资源，不能处理css/img等其他资源
2.生产环境比开发环境多压缩一个js文件
2.打包样式资源
创建webpack.config.js文件（配置文件）
use 数组中顺序执行：从右到左，从上到下
const {
resolve} = require('path');
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build')
},
// loader的配置
module:{
rules:[
{
//匹配哪些文件
test:/\.less/,
//使用哪些loader进行处理
use:[
'style-loader',
'css-loader',
]
},
{
//匹配哪些文件
test:/\.css/,
//使用哪些loader进行处理
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
]
},
// 模式
mode:'development'
}
3.打包html资源
webpack.config.js文件（配置文件）
plugin 1.下载，2.引入，3.使用
const {
resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build')
},
plugins:[
new HtmlWebpackPlugin({
// 复制一个html文件，并引入
template:'./src/index.html'
})
],
// 模式
mode:'development'
}
4.打包图片资源
webpack.config.js文件（配置文件）
需要url-loader 和html-loader
const {
resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build')
},
// loader的配置
module:{
rules:[
{
//匹配哪些文件
test:/\.less/,
//使用哪些loader进行处理
use:[
'style-loader',
'css-loader',
]
},
{
//匹配哪些文件
test:/\.css/,
//使用哪些loader进行处理
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{
// 处理图片资源,但是处理不了html中img的路径问题
test: /\.(jpg|png|gif)$/,
loader:'url-loader',
options:{
limit: 8* 1024,
// 关闭es6
esModule:false,
name:'[hash:10].[ext]' //不重复名字
},
},
{
// 处理html中的img
test: /\.html$/,
loader:'html-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 复制一个html文件，并引入
template:'./src/index.html'
})
],
// 模式
mode:'development'
}
5.打包其他资源
webpack.config.js文件（配置文件）
主要用到 file-loader
const {
resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build')
},
// loader的配置
module:{
rules:[
{
//匹配哪些文件
test:/\.less/,
//使用哪些loader进行处理
use:[
'style-loader',
'css-loader',
]
},
{
//匹配哪些文件
test:/\.css/,
//使用哪些loader进行处理
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{
// 处理图片资源,但是处理不了html中img的路径问题
test: /\.(jpg|png|gif)$/,
loader:'url-loader',
options:{
limit: 8* 1024,
// 关闭es6
esModule:false,
name:'[hash:10].[ext]' //不重复名字
},
},
{
// 处理html中的img
test: /\.html$/,
loader:'html-loader'
},
{
// 打包其他资源
exclude: /\.(css|js|html)$/,
loader: 'file-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 复制一个html文件，并引入
template:'./src/index.html'
})
],
// 模式
mode:'development'
}
6.devServer
// 自动打包运行
// 指令：npx webpack-dev-server
webpack.config.js文件（配置文件）
const {
resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build')
},
// loader的配置
module:{
rules:[
{
//匹配哪些文件
test:/\.css/,
//使用哪些loader进行处理
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{
// 处理html中的img
test: /\.html$/,
loader:'html-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 复制一个html文件，并引入
template:'./src/index.html'
})
],
// 自动打包运行
// 指令：npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname,'build'),
compress:true,
port:3000,
open:true
},
// 模式
mode:'development'
}
7.提取css成单独文件
用到mini-css-extract-plugin插件
并且将style-loader 改为 MiniCssExtractPlugin.loader,
webpack.config.js文件（配置文件）
const {
resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build')
},
// loader的配置
module:{
rules:[
{
//匹配哪些文件
test:/\.css/,
//使用哪些loader进行处理
use:[
MiniCssExtractPlugin.loader,
'css-loader',
]
},
{
// 处理html中的img
test: /\.html$/,
loader:'html-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 复制一个html文件，并引入
template:'./src/index.html'
}),
new MiniCssExtractPlugin()
],
// 自动打包运行
// 指令：npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname,'build'),
compress:true,
port:3000,
open:true
},
// 模式
mode:'development'
}
8.css兼容
package.json增加
webpack.config.js文件（配置文件）
const {
resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build')
},
// loader的配置
module:{
rules:[
{
//匹配哪些文件
test:/\.css/,
//使用哪些loader进行处理
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options:{
ident:'postcss',
plugins:()=>{
require('postcss-preset-env')()
}
}
}
]
},
{
// 处理html中的img
test: /\.html$/,
loader:'html-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 复制一个html文件，并引入
template:'./src/index.html'
}),
new MiniCssExtractPlugin()
],
// 自动打包运行
// 指令：npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname,'build'),
compress:true,
port:3000,
open:true
},
// 模式
mode:'development'
}
9.css压缩
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
const {
resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build')
},
// loader的配置
module:{
rules:[
{
//匹配哪些文件
test:/\.css/,
//使用哪些loader进行处理
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options:{
ident:'postcss',
plugins:()=>{
require('postcss-preset-env')()
}
}
}
]
},
{
// 处理html中的img
test: /\.html$/,
loader:'html-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 复制一个html文件，并引入
template:'./src/index.html'
}),
new MiniCssExtractPlugin(),
new OptimizeCssAssetsWebpackPlugin()
],
// 自动打包运行
// 指令：npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname,'build'),
compress:true,
port:3000,
open:true
},
// 模式
mode:'development'
}
10.eslint 语法检查
注意：不检查第三方 node_module
npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import
"eslintConfig": {
"extends": "airbnb-base"
}
const {
resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build')
},
// loader的配置
module:{
rules:[
{
//匹配哪些文件
test:/\.css/,
//使用哪些loader进行处理
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options:{
ident:'postcss',
plugins:()=>{
require('postcss-preset-env')()
}
}
}
]
},
{
// 处理html中的img
test: /\.html$/,
loader:'html-loader'
},
// {
// test:/\.js$/,
// exclude:/node_modules/,
// loader:'eslint-loader',
// options:{
// fix:true
// }
// }
]
},
plugins:[
new HtmlWebpackPlugin({
// 复制一个html文件，并引入
template:'./src/index.html'
}),
new MiniCssExtractPlugin(),
new OptimizeCssAssetsWebpackPlugin()
],
// 自动打包运行
// 指令：npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname,'build'),
compress:true,
port:3000,
open:true
},
// 模式
mode:'development'
}
11.js，html压缩只要将mode改为production就会自动压缩
12.开发性能提升：HMR:热模块替换
在devServer中启动hot：true，
css默认启动hmr因为style-loader内部启动了
js：需要在js中添加
if (module.hot){
module.hot.accept('./print.js',function () {
print();
})
}
13.开发性能提升：source-map
方便找出开发中的错误
devtool: "source-map",
const {
resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build')
},
// loader的配置
module:{
rules:[
{
//匹配哪些文件
test:/\.css/,
//使用哪些loader进行处理
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options:{
ident:'postcss',
plugins:()=>{
require('postcss-preset-env')()
}
}
}
]
},
{
// 处理html中的img
test: /\.html$/,
loader:'html-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 复制一个html文件，并引入
template:'./src/index.html'
}),
new MiniCssExtractPlugin(),
new OptimizeCssAssetsWebpackPlugin()
],
// 自动打包运行
// 指令：npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname,'build'),
compress:true,
port:3000,
open:true
},
devtool: "source-map",
// 模式
mode:'development'
}
13.生产性能提升：tree-shaking（去除没用到的代码）
1.必须es6模块化，2.开启生产环境
在package.json中配置
"sideEffects":["*.css"]