webpack成长指北第4章---webpack配置文件

最新推荐文章于 2024-09-27 15:27:45 发布

Boale_H

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量131

点赞数

分类专栏：项目框架搭建文章标签： javascript 前端 webpack

Edited by Boale_H （博哥的二进制世界）

本文链接：https://blog.csdn.net/Boale_H/article/details/106816133

版权

项目框架搭建专栏收录该内容

31 篇文章 0 订阅

订阅专栏

webpack成长指北第4章---webpack配置文件

为什么需要webpack配置文件
编写业务代码
创建webpack配置文件
编写webpack.config.js
配置package.json的script指令
打包

为什么需要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>