1、搭建项目
1）、md webpack5-demo：打开VSCode新建终端，创建webpack5-demo文件名
2）npm init -y：安装npm项目初始化
3）npm i webpack webpack-cli -D：安装webpack和webpack-cli （-D表示安装开放环境依赖）
4）入口文件编写，创建src
2、webpack.config.js基本配置
const path = require("path")
module.exports={
//打包入口
entry:"./src/main.js",
//打包出口
output:{
// 输出文件名
filename:"index.js",
// __dirname nodejs的变量，代表当前文件的目录绝对路径
path:path.resolve(__dirname, "dist")
}
}
1)新建main.js在main.js里编写
···
console.log("测试webpack")
···
2）VSCode终端输入 npx webpack运行
生成如下dist
恭喜webpack运行成功
loader配置
style-loader，css-loader安装css打包配置
执行，npm i style-loader css-loader -D
webpack.config.js编写
const path = require("path")
module.exports={
//打包入口
entry:"./src/main.js",
//打包出口
output:{
// 输出文件名
filename:"index.js",
// __dirname nodejs的变量，代表当前文件的目录绝对路径
path:path.resolve(__dirname, "dist")
},
// loader的配置
module:{
rules:[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
// plugins的配置
plugins: [
// 详细plugins的配置
],
// 模式
mode: 'development', // 开发模式
// mode: 'production'
}
新建common.css文件编辑css，在main.js引入
import "./css/common.css"
在dist文件中新建index.html,引入index.js
css
运行：npx webpack，
浏览器中运行index.html
css打包成功
less，less-loade，安装less打包配置
执行，npm i less less-loader -D
module配置
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
// 将less文件编译成css文件
// 需要下载 less-loader和less
'less-loader'
]
}
创建在css中less.less，在main.js中引入import "./css/less.less"
运行：npx webpack
运行dist文件中的html
less打包配置成功
sass，sass-loade，安装sass打包配置
执行，npm i sass sass-loader -D
步骤与上面一样不在赘述
module配置
{
test:/\.s[ac]ss$/i,
use:[
'style-loader',
'css-loader',
'sass-loader'
]
}
stylus，stylus-loade，安装sass打包配置
执行，npm i stylus stylus-loader -D
module配置
{
test:/\.styl(us)?$/,//两种结尾方式styl或者styus
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
}
html打包配置
执行，npm i html-webpack-plugin -D
在src中新建html
html
删除dist
在webpack.config.js中配置
引入html-webpack-plugin
配置const HtmlWebpackPlugin= require("html-webpack-plugin")
plugins: [
// 详细plugins的配置
// html-webpack-plugin
// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
// 需求：需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template:'./src/index.html'
})
]
运行：npx webpack
css提取mini-css-extract-plugin
执行，npm i mini-css-extract-plugin -D
webpack.config.js引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins中配置
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: "css/style.css",
}),
module中配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
//"style-loader",
MiniCssExtractPlugin.loader,
"css-loader",
],
},
运行：npx webpack
图片打包url-loader file-loader
执行，npm i url-loader file-loader -D
module配置
{
// 默认处理不了html中img图片
// 处理图片资源
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载 url-loader file-loader
loader: "url-loader",
options: {
// 图片大小小于8kb，就会被base64处理
// 优点: 减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 2 * 1024,
// 解析时会出问题：[object Module]
// 解决：关闭url-loader的es6模块化，使用commonjs解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: "[hash:10].[ext]",
outputPath: "imgs",//路径根据项目名称自定义
},
type: 'javascript/auto'
},
html图片配置
执行，npm i html-loader -D
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
loader: 'html-loader'
}
运行：npx webpack
其他资源处理
{
// 处理其他资源
exclude: /\.(node_modules|html|js|css|less|sass|scss|stylus|styl|jpg|png|gif)/,
loader: 'file-loader',
options: {
esModule: false,
outputPath: 'file',
},
type:"javascript/auto",
},
devServer配置
npm i webpack-dev-server -D
devServer: {
// 项目构建后路径
static: {
directory: path.join(__dirname, "public"),
},
// 启动gzip压缩
compress: true,
// 端口号
port: 9000,
//启动浏览器open
open: true,
},
package.json配置
"scripts": {
"dev": "webpack serve --config ./webpack.config.js"
},
运行命令：npm run dev
css兼容性处理
执行安装，npm i postcss-loader postcss-preset-env -D
module
{
test: /\.css$/,
use: [
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
// postcss的插件
plugins:[require("postcss-preset-env")],
},
},
},
],
}
package.json配置
development//表示开发环境
production//表示生产环境
"browserslist": {
"development": [
"last 3 chrome version",
"last 3 firefox version",
"last 3 safari version"
],
"production": [
">0.02%",
"not dead",
"not op_mini all"
]
}
在css中编辑
h{
display: flex;
transform:rotate(10deg)
}
编译后
h{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
transform:rotate(10deg)
}
css压缩
安装：npm i css-minimizer-webpack-plugin -D
webpack.config头部引入
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
plugins: 中添加
new CssMinimizerPlugin()
html压缩
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩html代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
],
更多配置看官方文档：https://github.com/jantimon/html-webpack-plugin#options
js压缩
只需要讲mode模式调整成production模式
如：mode: "production"
js语法检查
执行：npm i eslint eslint-webpack-plugin -D
https://webpack.docschina.org/plugins/eslint-webpack-plugin/#fix
webpack.config引入
const ESLintPlugin = require("eslint-webpack-plugin");
plugins中配置
new ESLintPlugin({
extensions: ["js"],
//context: resolve("src"),
exclude: "/node_modules",
// 自动修复eslint的错误
fix: true
})
其检查规范配置借鉴大众认可的，airbnb插件
运行：npm i eslint-config-airbnb-base eslint-plugin-import -D
airbnb-base：https://www.npmjs.com/package/eslint-config-airbnb-base
然后再package.json中配置：
"eslintConfig":{
"extends":"airbnb-base"，
"env": {
"browser": true // 支持浏览器端全局变量
}
}
js兼容性处理
下载：npm i babel-loader @babel/core @babel/preset-env -D
https://webpack.docschina.org/loaders/babel-loader/
1
全部js兼容性处理：npm i @babel/polyfill -D
module中配置：
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env' ]
}
}
兼容的js⬇
import '@babel/polyfill'; //js文件中引入
const add = (x, y) => {
return x + y;
};
console.log(add(8, 8));
2
按需加载：npm i core-js -D
module中配置：
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
devtool source map构建代码出错提示
https://webpack.docschina.org/configuration/devtool/#devtool
module.exports = {
//source-map,eval-source-map提示具体部位错误
devtool: 'eval-source-map',
}
tree shaking：去除无用代码
https://webpack.docschina.org/guides/tree-shaking/
- 必须使用ES6模块化 2) 开启production环境
作用: 减少代码体积
"sideEffects": false 所有代码都没有副作用都可以进行tree shaking
问题：可能会把css / @babel/polyfill （副作用）文件干掉
"sideEffects": [".css", ".less"]
如有测试console.log没有被调用到的方法等，会被去除
在package.json中配置
"sideEffects": [
"*.css"
]
clean-webpack-plugin
npm i clean-webpack-plugin -D
https://www.npmjs.com/package/clean-webpack-plugin
它的作用就是每次打包的时候，都会把 dist 目录清空，防止文件变动后，还有残留一些老的文件，以及避免一些缓存问题
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new CleanWebpackPlugin()
]
生成文件目录清空2
output设置，同理清空
output: {
clean: true, // 在生成文件之前清空 output 目录
},
webpack-merge合并两个配置文件
npm i webpack-merge -D
1）创建webpack.base.config
2）在webpack.dist.prod.config文件中引入下面代码
const {merge} = require("webpack-merge");
const webpackBaseConfig = require("./webpack.base.config.js");
合并
const prodConfig={...}
module.exports = merge(webpackBaseConfig,prodConfig);