webpack是一款打包工具,默认只处理js文件,其他类型资源需要使用loader或plugin去处理。
1、webpack5 准备工作
安装教程
推荐使用本地项目安装,尽量不安装全局的。
1_1、0配置打包
项目:project/src/index.js
写入任意js代码
然后初始化:project/
根目录下启动cmd窗口,输入npm init -y
同cmd创建继续输入yarn add webpack webpack-cli
同cmd里输入打包命令:npx webpack
打包完毕后,project/
目录下会产生一个dist/main.js
2、打包样式资源
创建webpack.config.js文件(配置文件)
loader中use数组中顺序执行:从右到左,从上到下
// webpack.config.js
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资源
plugins:下载,引入,使用
loader:下载,使用
后面的配置亦如此
// 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')
},
plugins:[
new HtmlWebpackPlugin({
// 复制一个html文件,并引入
template:'./src/index.html'
})
],
// 模式
mode:'development'
}
4、打包图片资源
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry:'./src/index.js',
// 输出
output:{
// 输出文件名
filename:'built.js',
//输出路径
path:resolve(__dirname,'build'),
// 图片需要使用公共路径
publicPath: "./"
},
// 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、打包其他资源
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
- package.json/scripts:
{"serve": "webpack serve --config 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
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增加
// package.json
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.1%",
"not dead",
"not op_mini all"
]
}
// 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’)
// webpack.config.js 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 语法检查
- 【beCareful】:不检查第三方 node_module
yarn add eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import
// package.json
"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中添加
// index.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' }
14、生产性能提升:tree-shaking(去除没用到的代码)
- 必须es6模块化
- 开启生产环境
- 在package.json中配置
// package.json "sideEffects":["*.css"]
- 在package.json中配置