开发环境的前端代码重在易于阅读和编写，生产环境的前端代码追求更快地运行，所以需要通过前端构建工具将开发环境的前端代码通过混淆压缩打包构建成生产环境的前端代码。
webpack的用途
webpack 是众多前端构建工具的一种，主要实现以下功能：
- 压缩代码
将JS、CSS代码混淆压缩，让代码体积更小，加载更快 - 编译语法
将 Less、Sass、ES6、TypeScript 等浏览器可能不兼容的语法编译成浏览器支持的语法，如使用Babel编译ES6语法
CSS和JS的模块化语法，有的浏览器也不兼容，需使用webpack、Rollup等进行处理。
babel 的用途
将 ES6+ 的语法编译为 ES5 的语法，提升代码的兼容性，因为有的浏览器不支持 ES6+ 的语法
安装 webpack 和 babel
安装 node.js
创建文件夹 webpack_demo
创建文件夹 webpack_demo
初始化项目
npm init -y
安装 webpack
为提升安装速度，此处使用了 cnpm （若无法使用，先执行 npm i cnpm 安装 cnpm ）
cnpm install webpack webpack-cli -D
安装 babel
用于将 ES6 语法编译成 ES5
cnpm install @babel/core @babel/preset-env babel-loader -D
新建文件 .babelrc
添加 babel 相关的配置
{ "presets": ["@babel/preset-env"], }
安装 webpack-dev-server
用于启动服务
cnpm install webpack-dev-server
安装 html-webpack-plugin
用于解析 html
cnpm install html-webpack-plugin -D
新建文件 webpack.config.js
开发环境 webpack 的配置文件（具体含义详见代码注释）
// 导入js包 -- path 用于拼接文件路径 const path = require("path"); // 导入插件 -- html-webpack-plugin 用于打包 html const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { // 构建模式，默认值为 production (会压缩代码并进行各种优化，如 tree shaking)，还可设置为 development，方便调试 mode: "development", // 指定入口文件为 src/index entry: path.join(__dirname, "src", "index"), // 将js文件打包到 dist/bundle.js 中 output: { filename: "bundle.js", path: path.join(__dirname, "dist"), }, // 模块 module: { // 规则 rules: [ { // 正则匹配所有以.js结尾的文件 test: /\.js$/, // 使用 babel-loader 插件 loader: ["babel-loader"], // 搜索 src 文件夹中的文件 include: path.join(__dirname, "src"), // 不搜索 node_modules 中的文件 exclude: /node_modules/, }, ], }, // 配置插件 plugins: [ // 使用插件 html-webpack-plugin 将 src/index.html 打包到 dist/index.html 中 new HtmlWebpackPlugin({ template: path.join(__dirname, "src", "index.html"), filename: "index.html", }), ], // 开发环境服务配置 —— 以下配置的含义：自动打开浏览器，访问 localhost:3000/index.html 渲染 dist/index.html devServer: { // 端口 port: 3000, // 路径 contentBase: path.join(__dirname, "dist"), // 根目录 // 是否自动打开浏览器 open: true, }, }
新建文件 webpack.prod.js
打包构建生产环境代码时的 webpack 配置文件（具体含义详见代码注释）
// 导入js包 -- path 用于拼接文件路径 const path = require("path"); // 导入插件 -- html-webpack-plugin 用于打包 html const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { // 构建模式，默认值为 production (会压缩代码并进行各种优化，如 tree shaking)，还可设置为 development，方便调试 mode: "production", // 指定入口文件为 src/index entry: path.join(__dirname, "src", "index"), // 将js文件打包到 dist/bundle.js 中 output: { // 添加了 [contenthash] ，用于打包时，根据代码内容生成一个 hash 字符串，若代码没发生改变，则这个 hash 字符串不会改变，利于命中浏览器缓存，提升性能 filename: "bundle.[contenthash].js", path: path.join(__dirname, "dist"), }, // 模块 module: { // 规则 rules: [ { // 正则匹配所有以.js结尾的文件 test: /\.js$/, // 使用 babel-loader 插件 loader: ["babel-loader"], // 搜索 src 文件夹中的文件 include: path.join(__dirname, "src"), // 不搜索 node_modules 中的文件 exclude: /node_modules/, }, ], }, // 配置插件 plugins: [ // 使用插件 html-webpack-plugin 将 src/index.html 打包到 dist/index.html 中 new HtmlWebpackPlugin({ template: path.join(__dirname, "src", "index.html"), filename: "index.html", }), ], };
新建文件 src/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>任意内容</p> </body> </html>
新建文件 src/index.js
// ES6语法范例 —— 箭头函数 const sum = (a, b) => a + b const result = sum(10, 20) console.log(result)
在 package.json 的 scripts 中添加
- dev 默认使用的 webpack.config.js 的配置，用于本地开发启动项目
- build 明确指出使用 webpack.prod.js 的配置，用于打包构建生产代码
"build": "webpack --config webpack.prod.js", "dev": "webpack-dev-server"
本地运行项目
npm run dev
在浏览器中查看源码，可见 ES6 语法已编译为 ES5 语法
打包项目
npm run build
查 dist 文件中的代码，可见 ES6 语法已编译为 ES5 语法
