共计 3825 个字符，预计需要花费 10 分钟才能阅读完成。
1、新建我的项目文件夹 test
2、终端 cd test
3、运行
npm init -y创立 package.json 文件，生成如下目录
4、配置 webpack.config.js
/*
1. 装置 webpack
npm install webpack@5.5.1 webpack-cli@4.2.0 -D // - D 装置开发环境
2. package.json
script 节点下的脚本，能够通过 npm run xx 来执行，例如：npm run dev
"scripts": {
"dev": "webpack" // 不会执行压缩，只是运行 webpack 生产文件，打包文件到 dist 目录
"dev": "webpack serve" // webpack 主动打包，webpack-dev-server 插件 (serve) 打包生成文件存储在内存中，本地没有打包文件，用做开发启动
"build": "webpack --mode production" // 我的项目上线公布，运行该命令，本地生成 build 文件
// --mode webpack 运行模式 production 生成环境 压缩和性能优化，而且会笼罩 webpack.config.js 中的 mode 的值
}
3. 默认约定
默认的打包入口文件为 src -> index.js
默认的输入文件门路为 dist -> main.js
*/
// html-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 打包，先删除 dist 文件夹
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const path = require('path'); // node.js 中专门操作门路的模块
module.exports = {
mode: 'development', // mode 用来指定构建模式。可选值 development | production
devtool: 'eval-source-map', // 开发环境，SourceMap 控制台报错行数校验。devtool: 'nosources-source-map', // 生成环境，为了我的项目平安，生成环境应用 nosources，这样会提供开发代码的报错行，然而 console 中不会裸露代码。（source-map)裸露代码和谬误行
entry: path.join(__dirname, './src/index.js'), // 打包入口文件门路
output: {path: path.join(__dirname, './dist'), // 输入文件的门路
filename: 'js/index.js' // 输入文件名称
},
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html', // 源文件门路
filename:'./index.html', // 复制、生成虚构文件门路
chunks:['main']
}),
new CleanWebpackPlugin()],
devServer: { // webpack-dev-server 插件选项配置
open: true, // 打包当前是否主动启动
host: 'localhost', // 主机地址
port: 3000, // 启动端口号
},
module: { // 所有第三方文件模块匹配规定配置
rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader']}, // 程序不能颠倒，打包会报错，从后往前面执行的。{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 程序不能颠倒，打包会报错，从后往前面执行的。// {test: /\.jpg|jpeg|png|gif|bmp$/, use: 'url-loader?limit=10240'}, // 图片地址 loader，小图片咱们能够给转换为 base64，配置参数（limit 小于等于 10240 字节(b),10kb）{ test: /\.jpg|jpeg|png|gif|bmp$/, use: {
loader: 'url-loader',
options: {
limit: 10240,
outputPath: 'image' // 公布打包的时候图片输入到 image 文件夹中
}
}},
{
test: /\.js$/,
exclude: /node_modules/, // 排除安装包，只转换程序员增加的 js 文件
use: {
loader: 'babel-loader',
options: {plugins: ['@babel/plugin-proposal-class-properties'] // 插件
}
}
}
]
}
/*
4. webpack 插件
1. webpack-dev-server 自动化构建插件 webpack serve 能够启动实时打包的 http 服务器 localhost:8080 拜访
装置：npm install webpack-dev-server@3.11.0 -D
配置：package.json 中 scripts 中 "dev": "webpack serve"
主见：如果不开启主动打包，手动启动会每次替换 dist 文件，开启实时打包 webpack 会把生产的文件保留到内存中，默认存储到根目录中，暗藏不可见，然而能够 localhost:8080/index.js 拜访，所以须要批改 index.html 中引入的 index.js 文件地址 /index.js
2. html-webpack-plugin html 模板插件
咱们当初拜访 localhost:8080 默认拜访的是根目录，所以这个插件能够帮忙咱们间接拜访 scr 上面的 index.html 文件。装置：npm install html-webpack-plugin@4.5.0 -D
主见：如果配置实现，启动报错，那么可能是 webpack 和插件的版本不匹配，webpack 写死版本号 5.5.1, 删除 node_modules 重新安装
index.html 头部也不须要本人引入 js，插件会主动将 js 引入到 body 最初一行。3. clean-webpack-plugin 打包主动清理 dist 目录
装置：npm install clean-webpack-plugin@3.0.0 -D
*/
/*
5. loader：帮助 webpack 解决非.js
默认 webpack 只能解决.js 文件模块，为了反对其余文件所以须要应用 loader 加载器解决其余文件
css-loader .css
less-loader .less
babel-loader ES6 等高级 js 语法
1. css 文件 loader
npm i style-loader@2.0.0 css-loader@5.0.1 -D
2. less 文件 loader
npm i less-loader@7.1.0 less@3.12.2 -D
3. url 相干 loader
npm i url-loader@4.1.1 file-loader@6.2.0 -D
4. ES6 语法转换 babel-loader
npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D
*/
/*
6. 企业我的项目打包优化
1. 生成打包报告，依据报告剖析具体优化计划
2. Tree-shaking
3. 为第三方库启用 CDN 加载
4. 配置组件的按需加载
5. 开启路由懒加载
6. 定制首页内容，服务器渲染 SSR
*/
/*
7. Source Map
定义：信息文件，存储地位信息，代码公布压缩混同前后对应关系。问题：webpack 默认启用 SouceMap 然而报错行数和开发行数有出入
*/
}5、package.json 配置 scripts: {}
{
"name": "webpack",
"version": "1.0.0",
"description": "","main":"index.js","scripts": {"dev":"webpack serve","build":"webpack --mode production"},"keywords": [],"author":"",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"babel-loader": "^8.2.1",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.0",
"jquery": "^3.6.0",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "5.5.1",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
}
}
github 我的项目地址：https://github.com/zxc1989092…
正文完
