一、什么是 webpack ?
webpack 是一个流行的前端项目构建工具(打包工具)
二、 在项目中安装和配置 webpack
① 新建项目空白目录,并运行 npm init –y
命令,用于初始化包管理配置文件 package.json
② 运行 npm install webpack webpack-cli –D
命令,安装 webpack 相关的包
③ 在项目根目录中,创建名为 webpack.config.js
的 webpack 配置文件,配置以下内容:
module.exports = {
mode: 'development'
}
④ 在 package.json
配置文件中的 scripts 节点下,新增 dev 脚本如下:
"scripts": {
"dev": "webpack"
}
⑤ 在终端中运行 npm run dev
命令,启动 webpack 进行项目打包
⑥ 在项目根目录中就会自动生成一个dist文件夹,我们只需要把里面的main.js引入到项目中即可
三、如何自定义打包的入口与出口
① webpack 默认规定:打包的入口文件为 src -> index.js 、打包的出口文件为 dist -> main.js
② 如果想要修改打包的入口与出口,可以在 webpack.config.js
中新增如下配置信息:
const path = require('path')
module.exports = {
entry: path.join(__dirname