- 两种开发模式
- 开发模式：代码能编译自动化运行
- 生产模式：代码编译优化输出
- Webpack 基本功能
- 开发模式：可以编译 ES Module 语法
- 生产模式：可以编译 ES Module 语法，压缩 js 代码
- Webpack 配置文件
- 5 个核心概念
- entry
- output
- loader
- plugins
- mode
- devServer 配置
webpack直接打包输出webpack serve启动开发服务器，内存编译打包没有输出
仓库代码:
https://gitee.com/zhouyunfang_admin/webpack5-base/tree/webpack-base/
https://gitee.com/zhouyunfang_admin/webpack5-base/tree/webpack-base/
生产环境路径D:\myProject\webpack5\webpack5-demo\config\webpack.prod.js
// 生产环境 npx webpack --config ./config/webpack.pro.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
// https://webpack.docschina.org/plugins/mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//eslint文档 https://webpack.docschina.org/plugins/eslint-webpack-plugin/
const ESLintPlugin = require("eslint-webpack-plugin");
const path = require("path");
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader, //单独生成css文件
"css-loader", //将css资源编译成commonjs的模块到js中
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor,
].filter(Boolean); //过滤掉preProcessor为undefined值
};
// webpack都是在nodejs平台运行所以要用到node语法
module.exports = {
// 入口 (相对路径)
entry: "./src/main.js",
// 输出
output: {
// 文件输出路径
path: path.resolve(__dirname, "../dist"),
// 入口文件打包输出文件名
filename: "static/js/main.js",
clean: true, //webpack5特性打包前清除上一次打包记录
},
// 加载器
module: {
rules: [
// loader的配置
{
test: /\.css$/, //只检测.css文件
use: getStyleLoaders(),
},
{
test: /\.less$/,
// use与loader的区别,use可以用多个loader;loader只能用一个(loader:'xxxx')
use: getStyleLoaders("less-loader"),
},
{
test: /\.s[ac]ss$/, //a和c结尾的文件都行(sass|scss)
use: getStyleLoaders("sass-loader"),
},
// https://webpack.docschina.org/guides/asset-modules/#resource-assets
{
test: /\.(png|jpe?g|gif|webp|svg)$/, //$匹配结尾，在多行检测中，会匹配一行的结尾
type: "asset", //转base64
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的图片转为base64,用于减少请求数据,但体积会大一点点
},
},
generator: {
// 生成输出的图片名字[hash:10]表示只取前10位
// ext:扩展名
// query图片参数
filename: "static/images/[hash:10][ext][query]",
},
},
{
test: /\.(ttf|woff2?|mp3|mp4|avi)$/, //匹配字体图标库或者视频文件
type: "asset/resource", //resource对文件原样的输出
generator: {
//输出media名称
filename: "static/media/[hash:10][ext][query]",
},
},
{
test: /\.js$/,
exclude: /(node_modules)/, //排除node_modules不做js转换处理
use: {
loader: "babel-loader",
// options: {options配置可以写到babel.config.js文件中好维护
// presets: ["@babel/preset-env"],
// },
},
},
],
},
// 插件
plugins: [
new ESLintPlugin({
//context指定文件根目录，类型为字符串(检查src下的文件)
context: path.resolve(__dirname, "../src"),
}),
/*
https://webpack.docschina.org/plugins/html-webpack-plugin/
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
*/
// new HtmlWebpackPlugin()会将原来的结构覆盖生成一个新的文件
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
// 针对css打包后放置指定路径
filename: "static/css/main.css",
}),
// css压缩
new CssMinimizerPlugin(),
],
// 模式
mode: "production",
};
开发环境配置路径D:\myProject\webpack5\webpack5-demo\config\webpack.dev.js
// 开发环境 运行模式npx webpack serve --config ./config/webpack.dev.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
//eslint文档 https://webpack.docschina.org/plugins/eslint-webpack-plugin/
const ESLintPlugin = require("eslint-webpack-plugin");
// webpack都是在nodejs平台运行所以要用到node语法
module.exports = {
// 入口 (相对路径)
entry: "./src/main.js",
// 输出
output: {
// 文件输出路径(开发模式下没有输出)
path: undefined,
// 入口文件打包输出文件名
filename: "static/js/main.js",
},
// 加载器
module: {
rules: [
// loader的配置
{
test: /\.css$/, //只检测.css文件
use: [
//执行顺序,从右到左(从下到上)
"style-loader", //将js中css通过创建style标签添加到html中动态生效
"css-loader", //将css资源编译成commonjs的模块到js中
],
},
{
test: /\.less$/,
// use与loader的区别,use可以用多个loader;loader只能用一个(loader:'xxxx')
use: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
{
test: /\.s[ac]ss$/, //a和c结尾的文件都行(sass|scss)
use: [
// 将 JS 字符串生成为 style 节点
"style-loader",
// 将 CSS 转化成 CommonJS 模块
"css-loader",
// 将 Sass 编译成 CSS
"sass-loader",
],
},
// https://webpack.docschina.org/guides/asset-modules/#resource-assets
{
test: /\.(png|jpe?g|gif|webp|svg)$/, //$匹配结尾，在多行检测中，会匹配一行的结尾
type: "asset", //转base64
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的图片转为base64,用于减少请求数据,但体积会大一点点
},
},
generator: {
// 生成输出的图片名字[hash:10]表示只取前10位
// ext:扩展名
// query图片参数
filename: "static/images/[hash:10][ext][query]",
},
},
{
test: /\.(ttf|woff2?|mp3|mp4|avi)$/, //匹配字体图标库或者视频文件
type: "asset/resource", //resource对文件原样的输出
generator: {
//输出media名称
filename: "static/media/[hash:10][ext][query]",
},
},
{
test: /\.js$/,
exclude: /(node_modules)/, //排除node_modules不做js转换处理
use: {
loader: "babel-loader",
// options: {options配置可以写到babel.config.js文件中好维护
// presets: ["@babel/preset-env"],
// },
},
},
],
},
// 插件
plugins: [
//plugins的配置
new ESLintPlugin({
//context指定文件根目录，类型为字符串(检查src下的文件)
context: path.resolve(__dirname, "../src"),
}),
/*
https://webpack.docschina.org/plugins/html-webpack-plugin/
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
*/
// new HtmlWebpackPlugin()会将原来的结构覆盖生成一个新的文件
new HtmlWebpackPlugin({
/**
* 模板以public/index.html文件创建新的html文件,
* 新的html文件特点:
* 结构和原来的一致
* 自动引入打包输出的资源
*/
template: path.resolve(__dirname, "../public/index.html"),
}),
],
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
// 模式
mode: "development", //设置为开发 mode: "development |production ",
};
package.json文件配置启动环境
"scripts": {
"start": "npm run dev",
"dev": "webpack server --config ./config/webpack.dev.js",
"build": "webpack --config ./config/webpack.prod.js"
},
