为什么需要webpack配置文件
之前我们执行 npx webpack <打包的入口文件路径> 就能对项目进行打包
npx webpack ./index.js // 让webpack打包index.js文件，（指定index.js为项目的入口文件）
但是如果只输入npx webpack ,默认情况下webpack就不知道入口文件是哪个，打包就会出错，而且执行 npx webpack <打包的入口文件路径>能打包成功，是因为webpack本身就有默认配置，如果我们需要自定义配置webpack的打包，就需要创建一个webpack的配置文件，这样就能自定义打包了
编写业务代码
- 目录结构
Header.js
function Header() { const dom = document.getElementById('root'); const header = document.createElement('div'); header.innerText = 'Header'; dom.append(header); } export default Header; // ES Module 导出
- Content.js
function Content() { const dom = document.getElementById('root'); const content = document.createElement('div'); content.innerText = 'Content'; dom.append(content); } export default Content; // ES Module 导出
- SideBar.js
function SideBar() { const dom = document.getElementById('root'); const sideBar = document.createElement('div'); sideBar.innerText = 'SideBar'; dom.append(sideBar); } export default SideBar; // ES Module 导出
- index.js
import Header from './src/components/Header/Header'; // ES Module 引入 import Content from './src/components/Content/Content'; // ES Module 引入 import SideBar from './src/components/SideBar/Sidebar'; // ES Module 引入 new Header(); new Content(); new SideBar();
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 解决没有favicon.ico时报错GET http://localhost:9999/favicon.ico 404 (Not Found) --> <link rel="shortcut icon" href="#" /> <title>webpack学习</title> </head> <body> <div>这是webpack学习</div> <div id="root"></div> <script src="./dist/main.js"></script> </body> </html>
创建webpack配置文件
- 在项目文件夹根目录创建webpack.config.js（默认情况下必须是这个名）,再直接运行npx webpack，webpack就会自动在根目录寻找webpack配置文件，就可以进行打包文件了
- 如果配置文件名不是webpack.config.js，想以xxx.js作为webpack的配置文件进行打包，则npx webpack --config xxx.js，就会以xxx.js作为配置文件进行打包
编写webpack.config.js
const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块 module.exports = { entry: './index.js', // 指定当前目录的index.js为打包的入口文件 output: { filename: 'main.js', // 打包后输出的打包文件的文件名 path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下 } }
配置package.json的script指令
打包
执行
npm run bundle
将生成的dist目录下的main.js引入index.html中
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 解决没有favicon.ico时报错GET http://localhost:9999/favicon.ico 404 (Not Found) --> <link rel="shortcut icon" href="#" /> <title>webpack学习</title> </head> <body> <div>这是webpack学习</div> <div id="root"></div> <script src="./dist/main.js"></script> </body> </html>
运行成功
