npm install webpack webpack-cli --save-dev
webpack.config.js
package.json
npm start
// webpack.config.js
const path = require("path");
// 导入html-webpack-plugin插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 这里面就是配置项
// 入口: 让webpack直到我们项目的从哪里开始打包
// 单入口
entry: path.resolve(__dirname, "src/main.js"),
// 出口: 让webpack知道我们项目打包以后放在那个文件夹下面以及打包好的文件叫什么名字
output: {
path: path.resolve(__dirname, "dist"), // 项目打包以后放在那个文件夹下面
filename: "bundler.js", // 打包好的文件叫什么名字
},
// 模式:告诉webpack本次打包的用户是为了开发调试还是交给后端部署上线
mode: "development", // 本次打包是为了开发调试
// 插件:把打包好的dist/bundler.js 引入到index.html中
plugins: [
// 可以用好多的插件,所有是数组
// HtmlWebpackPlugin可以帮我简单创建html文件,并把打包好的js引入
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src/index.html"),
}),
],
};
// package.json
// ....
"scripts": {
"start": "webpack --config webpack.config.js"
}
// ....
// 单入口,单输出文件
entry: path.resolve(__dirname, "src/main.js"), // 路径是一个字符串
// 单入口,单输出文件
entry:[ path.resolve(__dirname, "src/main.js"), path.resolve(__dirname, "src/fisrt.js")], // 路径是一个字符串的数组
// 多入口,多输出文件
// 多个chunk是插入同一个html文件还是分别插入多个html文件
// 由HtmlWebpackPlugin来进行配置,默认是插入同一个html文件
entry:{
// "chunk name":"入口文件路径"
'app':path.resolve(__dirname, "src/fisrt.js"),
'main':path.resolve(__dirname, "src/main.js")
}
plugins: [
// 多入口,多页面配置,一定要有filename设置,否则会报错
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src/index.html"),
filename: "app.html",
chunks: ["app"],
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src/index.html"),
filename: "main.html",
chunks: ["main"],
}),
];
npm install css-loader style-loader -D
module: {
rules: [
// 一条规则对应一种资源
{
// 告诉规则,后缀是.css的文件用我处理
test: /\.css$/,
// 指定要应用的loaders
// use后面的数组里面书写loader的名称
// loader有使用的先后顺序,现在后面的先执行
// 要使用loader要先安装
use: ["style-loader", "css-loader"],
// 当webpack工作的时候,遇到.css结尾的资源
// 使用css-loader进行加载和解析成css代码
// 交给style-loader插入到index.html的style标签中
},
],
}
npm install css-loader mini-css-extract-plugin -D
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// ...
module: {
rules: [
// 一条规则对应一种资源
{
// 告诉规则,后缀是.css的文件用我处理
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
// 当webpack工作的时候,遇到.css结尾的资源
// 使用css-loader进行加载和解析成css代码
// 交给MiniCssExtractPlugin.loader变成单独的css文件
},
],
},
plugins: [
// ...,
new MiniCssExtractPlugin({
filename: "css/[name].[chunkhash:5].js", // 把生成的css文件通过link插入html页面中
}),
],
// ...
};
npm install node-sass sass-loader -D
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// ...
module: {
rules: [
// 一条规则对应一种资源
{
// 告诉规则,后缀是.css的文件用我处理
test: /\.(css|sass|scss)$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
// 当webpack工作的时候,遇到.css或者.sass或者.scss结尾的资源
// 使用sass-loader加载
// 使用css-loader进行加载和解析成css代码
// 交给MiniCssExtractPlugin.loader变成单独的css文件
},
],
},
plugins: [
// ...,
new MiniCssExtractPlugin({
filename: "css/[name].[chunkhash:5].js", // 把生成的css文件通过link插入html页面中
}),
],
// ...
};
module.exports = {
module: {
rules: [
//...
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
type: "asset/resource",
generator: {
filename: "img/[name].[hash:5][ext]",
},
},
// [name]:图片的原始名称
// [ext]: 图片的原始后缀名
//...
],
},
};
babel-loader
babel-loader
内部依赖 babel 的核心包: @babel/core
npm install @babel/core babel-loader @babel/preset-env
{
// ...
"browserslist": [
">0.25%",
"not dead"
]
}
module.exports = {
// ..
module: {
rules: [
// ....,
{
test: /\.js$/, // 处理js后缀的文件转换
exclude: /node_modules/, // 排除node_modules里面的js文件
use: [
{
loader: "babel-loader",
options: {
presets: [["@babel/preset-env", {}]],
// {}里面可以通过targets设置想要要适配的浏览器
// 由于前面在package.json设置了,这里就设置为{}
},
},
],
},
],
},
};
module.exports = {
// ..
module: {
rules: [
// ....,
{
test: /\.js$/, // 处理js后缀的文件转换
exclude: /node_modules/, // 排除node_modules里面的js文件
use: ["babel-loader"],
},
],
},
};
// babel.config.js
presets: [["@babel/preset-env", { targets: "defaults" }]];
用 babel-loader 来处理 jsx 文件
修改 webpack.config.js 的配置
module.exports = {
// ...
module: {
rules: [
// 转换编译
{
test: /\.(js|jsx)$/, // 处理js后缀的文件转换
exclude: /node_modules/, // 排除node_modules里面的js文件
use: ["babel-loader"],
},
],
},
};
npm install @babel/preset-react -D
// babel.config.js
module.exports = {
presets: [
["@babel/preset-env", { targets: "defaults" }],
["@babel/preset-react", {}],
],
};
npm install react react-dom -S
// main.jsx
// 要用jsx语法,要先安装react
import React from "react";
// 要渲染dom,要先安装react-dom
import { createRoot } from "react-dom/client";
const ele = <h1>hello world</h1>;
// 把id是app的元素变成react的根节点
const root = createRoot(document.getElementById("app"));
// 在里面渲染ele这个html结构
root.render(ele);
module.exports = {
entry: {
// 把react等第三包放在一个入口里面
venders: ["react", "react-dom"],
app: {
import: path.resolve(__dirname, "src/main.jsx"),
dependOn: "venders", // 表示app里面import的文件要依赖venders入口的js代码
},
},
};
// webpack.config.js
module.exports = {
// ...
resolve: {
// 配置别名
alias: {
"@": path.resolve(__dirname, "src"),
},
// 允许忽略后缀名
extensions: [".js", ".jsx", "json"],
// 指定寻找第三方包的位置
modules: ["node_modules"],
},
};
npm install webpack-dev-server -D
module.exports = {
// ...
// 配置热更新服务器
devServer: {
// 设置服务器的根目录
static: path.resolve(__dirname, "dist"),
// 服务器端口
port: 8000,
// 是否自动打开浏览器
open: true,
// 用gzip压缩和提供服务
compress: true,
},
};
{
// ...
"scripts": {
"start": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --config webpack.config.js"
},
}
npm run dev