webpack5 学习手册
1. 初始化 webpack 项目 npm init -y （初始化一个 package.json 文件)
2. npm i webpack webpack-cli -D 下载这两个依赖包
3. npx webpack ./src/main.js --mode development //【 入口文件 打包模式 】 npx webpack 指令
// npx webpack ./src/main.js --mode production // 生产环境
4. 当你的项目下创建了 webpack.config.js 并在里面配置了相应 可以直接npx webpack 即可运行打包；【同3的升级版】
5. 配置css 规则
npm install style-loader css-loader --save-dev
{
test: /\.css$/,
use: [
//执行顺序，从左到右 (从上到下)
"style-loader", //将js中的css创建style属性添加到html中生效
"css-loader", //将css资源编译成commonjs的模块到js中
],
},
6. npm install --save-dev html-webpack-plugin
plugins: [new HtmlWebpackPlugin()],
7. npm install --save-dev webpack-dev-server 执行 npx webpack serve //开发环境 修改自动打包
devServer: {
static: {
directory: path.join(__dirname, "public"),
},
compress: true,
port: 9000,
},
8. 为了配置 开发环境与生产环境的config 新建目录config 创建创建 webpack.config.dev.js webpack.config.prod.js
执行 npx webpack serve --config ./config/webpack.config.dev.js 就可以启动开发环境
同理： npx webpack --config ./config/webpack.config.prod.js 打包生产环境资源
9. 在package.json 配置
"scripts": {
"dev": "webpack serve --config ./config/webpack.config.dev.js",
"build": "webpack --config ./config/webpack.config.prod.js"
},
启动开发环境 :npm run dev
打包生产环境：npm run build
10. npm install --save-dev mini-css-extract-plugin //将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
<见下面的webpack.config.prod.js>
11. npm i postcss-loader postcss postcss-preset-env -D //样式兼容性处理
注：加载器中的配置 要在css-loader下面 在less-loader sass-loader的前面
12 npm install css-minimizer-webpack-plugin --save-dev // 压缩css
13. devtool 脚本的映射
开发环境 devtool:"cheap-module-source-map" //错误只提示到行
生产环境 devtool:"source-map" //错误提示到行、列
14. 热模块替换 （开发环境）
dev-serve 设置 hot:true
15: 加载器里面 oneOf <见下面的webpack.config.prod.js>
webpack.config.prod.js：
const path = require("path"); // node 核心模块 专门处理路径问题
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//封闭一个方法
function getStyleLoader(pre) {
return [
//可以使用多个loader
//执行顺序，从左到右 (从上到下)
// "style-loader", //将js中的css创建style标签添加到html中生效
MiniCssExtractPlugin.loader, //提取css成单独的文件
"css-loader", //将css资源编译成commonjs的模块到js中
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", //能解决大多数样式兼容的问题
],
},
},
},
pre,
].filter(Boolean); //filter（undefined） 过虑掉传空的值
}
module.exports = {
//入口
entry: ["./src/main.js"], //相对路径 , "./public/index.html", "./public/test.html"
//输出
output: {
//文件的输出路径
// __dirname nodejs的变量 代表当前文件的文件夹目录
path: path.resolve(__dirname, "../dist"), //绝对路径
filename: "js/main.js", //输出到对应的目录下
clean: true, //自动清空上次打包的内容
},
//加载器
module: {
rules: [
//loader 的配置
{
oneOf: [
//只被其中一个处理
{
test: /\.css$/,
//loader:'xxx', // 只能使用一个loader
use: getStyleLoader(),
},
{
test: /\.less$/,
use: getStyleLoader("less-loader"),
// [
// MiniCssExtractPlugin.loader,
// "css-loader",
// {
// loader: "postcss-loader",
// option: {
// postcssOptions: {
// plugins: [
// "postcss-preset-env", //能解决大多数样式兼容的问题
// ],
// },
// },
// },
// "less-loader",
// ], //下载 less-loader 依赖
},
{
test: /\.sass$/,
use: getStyleLoader("sass-loader"),
// [
// MiniCssExtractPlugin.loader,
// "css-loader",
// {
// loader: "postcss-loader",
// option: {
// postcssOptions: {
// plugins: [
// "postcss-preset-env", //能解决大多数样式兼容的问题
// ],
// },
// },
// },
// "sass-loader",
// ], //下载 sass-loader 依赖
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
//小于10kb的图转化为base64
//优化 减少请求数 缺点：体积会变大一丢丢
maxSize: 10 * 1024, //10kb
},
},
generator: {
//输出图片名称
//hash:10 hash值取前10位
filename: "images/[hash:10][ext]",
},
},
],
},
],
},
//插件
plugins: [
//插件的配置
new HtmlWebpackPlugin({
//模板 以public/index.html 为模板
//新的html 文件特点 1：结构和原文一致 2.自动引入打包输出的资源
template: path.resolve(__dirname, "../public/index.html"),
}),
new MiniCssExtractPlugin({
filename: "css/main.css",
}),
new CssMinimizerPlugin(),
],
//模式
mode: "production", //production
devtool: "source-map", //错误提示到行、列
};
webpack.config.dev.js：
const path = require("path"); // node 核心模块 专门处理路径问题
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//入口
entry: "./src/main.js", //相对路径
//输出
output: {
//文件的输出路径
// __dirname nodejs的变量 代表当前文件的文件夹目录
path: path.resolve(__dirname, "../dist"), //绝对路径
filename: "js/main.js", //输出到对应的目录下
clean: true, //自动清空上次打包的内容
},
//加载器
module: {
rules: [
//loader 的配置
{
oneOf: [
//只被其中一个处理
{
test: /\.css$/,
//loader:'xxx', // 只能使用一个loader
use: [
//可以使用多个loader
//执行顺序，从左到右 (从上到下)
"style-loader", //将js中的css创建style标签添加到html中生效
"css-loader", //将css资源编译成commonjs的模块到js中
],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"], //下载 less-loader 依赖
},
{
test: /\.sass$/,
use: ["style-loader", "css-loader", "sass-loader"], //下载 sass-loader 依赖
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
//小于10kb的图转化为base64
//优化 减少请求数 缺点：体积会变大一丢丢
maxSize: 10 * 1024, //10kb
},
},
generator: {
//输出图片名称
//hash:10 hash值取前10位
filename: "images/[hash:10][ext]",
},
},
],
},
],
},
//插件
plugins: [
//插件的配置
new HtmlWebpackPlugin({
//模板 以public/index.html 为模板
//新的html 文件特点 1：结构和原文一致 2.自动引入打包输出的资源
template: path.resolve(__dirname, "../public/index.html"),
}),
],
//开发服务器
devServer: {
// static: {
// directory: path.join(__dirname, "public"),
// },
host: "localhost",
compress: true,
port: 9000,
open: true,
hot: true,
},
//模式
mode: "development", //production
devtool: "cheap-module-source-map", //错误只提示到行
};
