webpack code cloud address:
https://gitee.com/wang_yu5201314/webpackconfigjs-basic-settings
npm i plug-in name—S is used during both the project development and launch stages.
npm i plug-in name—D is used during the project development stage.
webpack.config.js builds js documentation for webpack plugins
The webpack basic package
webpack-cli and the running package
webpack-dev-server automatically package the program
html-webpack-plugin after each code modification and save. Make a copy of the specified page and place it in the root directory file
clean-webpack-plugin refreshes and repackages. file data
style-loader css-loader // Process .css suffix file
less-loader less // Process .less suffix file
url-loader file-loader // Process image files
Creating the babel.config.js file in the root directory requires definition and configuration under the webpack.config.js and babel.config.js files
babel-loader @babel/core @babel/plugin-proposal-decorators //Process the ones you add Advanced js file
@babel/preset-env core-js
webpack.config.js document configuration
const path = require("path");
// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require("html-webpack-plugin");
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
// 指定要复制哪个页面(主页面)
template: "./src/index.html",
// 指定复制出来的文件名和存放路径
filename: "./index.html",
});
// 注意：左侧的 { } 是解构赋值
const {
CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
// 可以了解到开发时出错的具体位置
// 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map
devtool: 'eval-source-map',
// 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
// devtool: 'nosources-source-map',
// mode 代表 webpack 运行的模式，可选值有两个 开发中 development 和 上线中 production
mode: "development",
// entry: '指定要处理哪个文件' __dirname 当前文档的存放路径
entry: path.join(__dirname, "./src/index.js"),
// 指定生成的文件要存放到哪里
output: {
// 存放的目录
path: path.join(__dirname, "dist"),
// 生成的文件名
filename: "js/bundle.js",
},
// 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
plugins: [htmlPlugin, new CleanWebpackPlugin()],
devServer: {
// 首次打包成功后，自动打开浏览器
open: true,
// 在 http 协议中，如果端口号是 80，则可以被省略
port: 80,
// 指定运行的主机地址
host: "127.0.0.1",
},
module: {
rules: [
// 定义了不同模块对应的 loader
{
test: /\.css$/, use: ["style-loader", "css-loader"] },
// 处理 .less 文件的 loader
{
test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
// 处理图片文件的 loader
// 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
// 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
// 通过limit 通知 webpack 图片的大小 <= limit的大小则 进行base64文件的转化
// 通过 outputPath 通知 webpack 图片打包后所保存的文件夹名称
// 多个参数用 & 符号进行分割
{
test: /\.jpg|png|gif$/,
use: "url-loader?limit=470&outputPath=images",
},
// 使用 babel-loader 处理高级的 JS 语法
// 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
// 用 exclude 进行排除第三方的js文件
// 因为第三方包中的 JS 兼容性，不需要程序员关心
{
test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
],
},
resolve: {
alias: {
// 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
"@": path.join(__dirname, "./src/"),
},
},
};
babel.config.js document configuration
module.exports = {
// 声明 babel 可用的插件
// 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
plugins: [["@babel/plugin-proposal-decorators", {
legacy: true }]],
};
package.json document configuration
{
"name": "study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack serve", // 启动设置
"build": "webpack --mode production" //打包设置
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@babel/plugin-proposal-decorators": "^7.20.5",
"babel-loader": "^9.1.0",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1",
"webpack": "^5.42.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^3.11.2"
}
}