前言
随着前端应用的日益复杂，通过直接编写 JavaScript、CSS、HTML 开发 Web 应用的方式已经无法应对当前 Web 应用的发展，前端工程化越来越受到了重视，许多前端构建工具脱颖而出，webpack就是目前最为流行的打包构建工具，因此每位前端er都需要掌握webpack技术。
开始
安装
首先确认环境之中安装了node，版本要求大于5.0.0
运行命令安装到项目目录，也可以安装到全局，但是机器不推荐，会因为不同项目的版本不同带来问题
npm install webpack webpack-cli -D # 或者 yarn add webpack webpack-cli -D 复制代码
webpack-cli是webpack的命令行工具，在webpack4之后剥离出来，需要手动安装
第一次打包体验
安装完之后新建一个文件webpack.config.js，然后添加如下配置
const path = require('path') module.exports = { entry: './src/js/index.js', mode: 'production', output: { filename: 'bundle.js', path: path.join(__dirname, './dist') } } 复制代码
entry是入口文件，webpack会从入口文件分析依赖图 ，mode是模式，有生产模式和开发模式，output是输出文件的信息，但是要注意输出路径一定要是绝对路径，不然会报错
然后我们新建src目录，创建js目录并新建两个js文件，index.js（和entry一致）和foo.js（随意命名），并分别添加如下代码
// index.js import { add } from './foo' const res = add(1, 3) console.log(res) // foo.js export function add(a, b) { return a + b } 复制代码
然后运行命令npx webpack，或者你也可以在package.json中新建script："build": "webpack"，然后运行命令npm run build，就可以看到打包之后的代码
打开着编译之后的bundle.js
直接输出4，这是因为使用了ES6模块化，如果替换为Commonjs结果就会是打包一个函数
我猜测这里可能就是因为ES6和CommonJS的区别之一，CommonJS是运行时加载，ES6是编译时输出接口的原因，当然这是我猜的，有知道的小伙伴可以留言告诉我一下
当然，这都是题外话，今天的主角是webpack，言归正传
本地开发
每改写一次代码都要构建一次才能看到效果，在项目逐渐庞大之后构建一次要花费很长时间，这显然是不现实的，所以webpack内置了开发服务器，当代码发生改变时自动编译
这里需要安装webpack-dev-server
npm install webpack-dev-server -D # 或者 yarn add webpack-dev-server -D 复制代码
然后在package.json中添加script如下
// <=webapack4 "serve": "webapck-dev-server" // 在webpack5以后将开发服务器命令集成进了webpack-cli，但还是需要手动安装依赖 // >=webpack5 "serve": "webpack serve" 复制代码
这时候运行命令打开的是一个静态文件服务器，因为我们还没有编写html文件，在src下新建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"> <title>webpack</title> </head> <body> <h2>Hello webpack</h2> </body> </html> 复制代码
然后安装HTML插件
npm install html-webpack-plugin -D # 或者 yarn add html-webpack-plugin -D 复制代码
在webpack.config.js中新增配置如下
plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, './src/index.html') // 指定模板位置 }) ], devServer: { contentBase: path.resolve(__dirname, 'dist') // 读取内容位置 } 复制代码
然后再运行serve命令，打开浏览器（默认端口是8080，如果被占用一依次+1）就能看到效果
这一节我们大体介绍了webpack的打包以及开发服务器，下一节开始我们说一下更多具体的配置
