webpack定制化 基础配置[基础、配置、初运行]
前提：
webpack5及其对应配套内容
node16.13.2
本文作用在webpack.config.js
一、webpack
1.安装
解释：Webpack 是一个静态资源打包工具，其功能比较有限(开发环境下仅编译JS与ES Module；生产环境下外加一个JS压缩;webpack5自动处理图片)，但其扩展性与灵活性及其强
安装：
npm init -y：创建npm包管理及项目npm i webpack webpack-cli -D #本文版本分别为5.74.0 4.10.0：下载webpack与webpack-cli到开发环境
2.配置
解释：配置基本分为五大配置，还有其它散乱配置，需自行新建文件webpack.config.js
2.1 entry
entry(入口)：指示 Webpack 从哪个文件开始打包
2.1.1 多入口
解释：打包多个js
module.exports ={
// 多入口
entry: {
main: './src/app/main.js',
app:'./src/app2/main.js'
}
}
2.2 output
output(输出)：指示 Webpack 打包完的文件输出到哪里去，如何命名等
2.3 module
loader(加载器)# module里面写着自己安装的很多loader：webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
注意：loader加载从右往左
2.4 plugins
plugins(插件)：扩展 Webpack 的功能
2.5 mode
mode(模式)：两种模式（production与development）
const webpack = require('webpack'); // 访问内置的插件（require是nodejs专门导入的语法）
const path = require('path')
module.exports = {
// 输入
entry: "./src/main.js",
// 输出
output: {
filename: "main.js",
// 输出到 dist文件夹
path: path.resolve(__dirname, './dist'),
// 每次打包前自动清除旧的dist
clean: true,
},
// 加载器
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },// 需要提前下载
],
},
// 插件
plugins: [new webpack.ProgressPlugin(),], //需要下载后导入
// 模式
mode: "development",
};
3.运行测试
文件结构：
├── node_moudules
├── package.json
├── package-lock.json
├── public
│ └── templates
├── index.html
└── src
└── app
├── main.js
└── views
└── add.js
webpack.config.js
const path = require('path')
module.exports = {
// 模式 开发模式
mode: 'development',
// 入口文件 main.js
entry: {
main: './src/app/main.js'
},
// 输出
output: {
// 输出到 dist文件夹
path: path.resolve(__dirname, './dist'),
// js文件下
filename: 'didi.js',
// 每次打包前自动清除旧的dist
clean: true,
}
}
package.json
// 主要是加入命令："build": "webpack" 执行webpack打包
// 使用：npm run build
// 不要命名冲突
{
"name": "npm2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../dist/didi.js"></script>
<title>gao-cli</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
src/app/main.js
// 需要安装es6语法对外暴露
export const add = (a, b) => {
return a + b
}
src/app/views/add.js
// es6导入语法
import { add } from "./views/add";
console.log(add(1, 2))
结语：请把本系列都看完再投入开发环境，优化配置很重要