webpack的基本打包配置
yarn init -y，创建package.json，用来记录依赖包，之后就可以安装webpack依赖包
yarn init -y
yarn add webpack webpack-cli -D，安装webpack依赖包，生成node_modules文件（-D表示只是开发中需要用的依赖，实际上线是不需要的）
yarn add webpack webpack-cli -D
- 到package.json中配置script，
"scripts": {"build":"webpack --config webpack.config.js"}
{ "name": "webpack", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "html-webpack-plugin": "^5.5.0", "webpack": "^5.72.0", "webpack-cli": "^4.9.2" }, "scripts": { "build": "webpack --config webpack.config.js" } }
- 新建一个
webpack.config.js，配置webpack文件，entry（入口）、output（出口）、mode（模式）
// 绝对路径 const path = require('path') // 配置webpack的配置文件，需要将配置的对象导出，给webpack使用 module.exports = { // 入口(entry) entry: './src/index.js', // 出口(entry) output: { // 输出的目录必须是一个绝对路径__dirname path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, // 模式(entry) mode: 'development', }
- 在
index.js中导入多个js文件
require('../public/js/index.js') console.log('Hello World!');
yarn build，最后执行webpack打包，多个js文件打包成一个js文件
