Webpack是一个模块打包工具,可以将多个模块打包成一个文件,提高项目的加载速度。支持多种模块格式,具有丰富的插件系统和配置选项。
官网地址:https://webpack.docschina.org/
npm init -y 生成包描述文件package.json
npm i webpack webpack-cli -D 安装webpack
npx webpack ./src/main.js --mode=development 以开发模式打包
npx webpack ./src/main.js --mode=production 以生产模式打包
有webpack.config.js文件时,可以直接使用 npx webpack 命令进行打包
webpack.config.js文件内容如下
const path=require('path');//nodejs核心模块,专门用来处理路径问题
module.exports={
//入口
entry:'./src/main.js',
//输出
output:{
//__dirname nodejs的变量,代表当前文件的文件夹目录
path:path.resolve(__dirname,'dist'),//绝对路径
filename:'main.js'
},
//加载器
module:{
rules:[
// loader的配置
],
},
//插件
plugins:[
// plugin的配置
],
//模式
mode:'development',//开发模式
}
package.json配置文件内容如下
运行:npm start
npm run build
{
"name": "del20231230",
"version": "1.0.0",
"description": "",
"main": "./src/main.js",
"scripts": {
"start":"npm run dev",
"dev": "webpack server --config ./config/webpack.dev.js",
"build": "webpack --config ./config/webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.23.7",
"@babel/preset-env": "^7.23.7",
"babel-loader": "^9.1.3",
"css-loader": "^6.8.1",
"eslint": "^8.56.0",
"eslint-webpack-plugin": "^4.0.1",
"html-webpack-plugin": "^5.6.0",
"less": "^4.2.0",
"less-loader": "^11.1.4",
"sass": "^1.69.6",
"sass-loader": "^13.3.3",
"style-loader": "^3.3.3",
"stylus": "^0.62.0",
"stylus-loader": "^7.1.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}
css-loader 会对 @import 和 url() 进行处理,就像 js 解析 import/require() 一样。
教程网址:https://webpack.docschina.org/loaders/css-loader/
npm install --save-dev css-loader 安装
import css from 'file.css';
webpack.config.js里配置
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
webpack 将 Less 编译为 CSS 的 loader。
教程网址:https://webpack.docschina.org/loaders/less-loader/
npm install less less-loader --save-dev 安装
import "./less/index.less";
webpack.config.js里配置
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
};
webpack 将 Less 编译为 CSS 的 loader。
教程网址:https://webpack.docschina.org/loaders/sass-loader/
npm install sass sass-loader --save-dev 安装
import "./sass/index.sass";
webpack.config.js里配置
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
],
},
};
webpack 将 Less 编译为 CSS 的 loader。
教程网址:https://webpack.docschina.org/loaders/stylus-loader/
npm install stylus stylus-loader --save-dev 安装
import "./stylus/index.styl";
webpack.config.js里配置
module.exports = {
module: {
rules: [
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader',// 将 Stylus 文件编译为 CSS
],
},
],
},
};
选择需要的字体项
下载选择后的字体
该插件使用 eslint 来查找和修复 JavaScript 代码中的问题。
字体网址:https://webpack.docschina.org/plugins/eslint-webpack-plugin/#root
安装:npm install eslint eslint-webpack-plugin --save-dev
const ESLintPlugin = require('eslint-webpack-plugin');
//插件
plugins:[
// plugin的配置
new ESLintPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, 'src'),
})
],
.eslintrc.js文件内容
module.exports={
extends: ["eslint:recommended"],
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
ecmaVersion: 6, //es6
sourceType: "module", // es module
},
rules: {
// 这里写你的规则
"no-var":2, //不能使用 var 定义变量
},
}
使用 Babel 和 webpack 转译 JavaScript 文件。
教程网址:https://webpack.docschina.org/loaders/babel-loader/
安装:npm install -D babel-loader @babel/core @babel/preset-env
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,// 排除node_modules中的js文件(这些文件不处理)
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
];
}
使用 Babel 和 webpack 转译 JavaScript 文件。
教程网址:https://webpack.docschina.org/plugins/html-webpack-plugin
安装:npm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
//插件
plugins:[
// plugin的配置
new HtmlWebpackPlugin()
],
webpack-dev-server 可用于快速开发应用程序。
教程网址:https://webpack.docschina.org/configuration/dev-server/
安装:npm install --save-dev webpack-dev-server
启动:npx webpack server
开发模式: npx webpack server --config ./config/webpack.dev.js
生产模式: npx webpack --config ./config/webpack.prod.js
// 开发服务器:不会输出资源,在内存中编译打包
devServer: {
host:"localhost",// 启动服务器域名
port:"3000",// 启动服务器端口号
open: true,// 是否自动打开浏览器
},
本插件会将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载。
教程网址:https://webpack.docschina.org/plugins/mini-css-extract-plugin
安装:npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
rules:[
// loader的配置
{
test: /\.css$/i, //只检测xxx文件
use: [
//执行顺序,从后往前
MiniCssExtractPlugin.loader, // 提取css成单独文件
'css-loader', // 将css资源编译成commoonjs的模块到js中
],
}
//插件
plugins:[
new MiniCssExtractPlugin(),
],
解决CSS兼容问题
教程网址:https://webpack.docschina.org/loaders/postcss-loader
安装:npm install --save-dev postcss-loader postcss postcss-preset-env
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env',//能解决大多样式兼容性问题
],
},
},
},
package.json里配置
,
"browserslist": [
"ie >= 8"
]
或
,
"browserslist": [
"last 2 version",
"> 1%",
"not dead"
]
优化和压缩 CSS
教程网址:https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/
安装:npm install css-minimizer-webpack-plugin --save-dev
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
//插件
plugins:[
new CssMinimizerPlugin(),
],
此选项控制是否生成,以及如何生成 source map。
教程网址:https://webpack.docschina.org/configuration/devtool/
devtool:"cheap-module-source-map", 开发模式
devtool:"source-map",//打包后生成map映射文件 生产模式
oneOf是每个文件只能被其中一个loader配置处理
教程网址:https://webpack.docschina.org/configuration/module#ruleoneof
rules:[
// loader的配置
{
// 每个文件只能被其中一个loader配置处理
oneOf:[
{
test: /\.css$/i, //只检测xxx文件
use: [
//执行顺序,从后往前
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader', // 将css资源编译成commoonjs的模块到js中
],
},
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
'less-loader', // 将less编译成css文件
],
},
]
},
],