Webpack的配置文件 - 《webpack》

首先为什么需要配置文件？
总结一下
- webpack-cli
知识补充

首先为什么需要配置文件？

我们在用webpack进行打包的时候，
webpack并不知道哪个文件是入口文件，打包出来的文件又放到哪里。 :::warning webpack并没有智能到我们给他一个文件，他就知道怎么打包的地步。
他需要我们给一个配置文件告诉他，到底该如何打包 :::

没有配置文件

即使没有配置文件也可以打包。

我们也能通过npx webpack命令进行打包。例如：npx webpack ./index.js 意思就是让webpack为我们打包index.js文件

目录结构

<!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>我是主页面</title>
</head>
<body>
  <div id = "root"></div>
  <script src="./dist/main.js"></script>
</body>
</html>

// var Header = require('./header.js')
// var Sidebar = require('./sidebar.js')
// var Content = require('./content.js')

import Header from './header.js'
import Sidebar from './sidebar.js'
import Content from './content.js'

new Header();
new Sidebar();
new Content();

function Header(){
  var dom = document.getElementById('root')
  var header = document.createElement('div')
  header.innerText = 'header';
  dom.append(header)
}
export default Header;
// 如果使用require
// module.exports = Header;

function Sidebar(){
  var dom = document.getElementById('root')
  var sidebar = document.createElement('div')
  sidebar.innerText = 'sidebar';
  dom.append(sidebar)
}
export default Sidebar;
// 如果使用require
// module.exports = Sidebar;

function Content(){
  var dom = document.getElementById('root')
  var content = document.createElement('div')
  content.innerText = 'content';
  dom.append(content)
}
export default Content;
// 如果使用require
// module.exports = Content;

那为什么不使用webpack的配置文件也可以打包呢？实际上，是webpack的团队有在丰富webpack的默认配置，所以当我们没有用配置的时候，实际上就是在用他的默认配置文件。

如何编写webpack的默认文件

:::success 一般我们的配置文件名为webpack.config.js。
但他也可以是别的名字 :::

// node.js的文件模块
const path = require('path')
module.exports = {
  // entry的意思是我们这个项目从哪个文件开始打包
  entry: './index.js',
  // 打包的文件我们要放到哪里
  output: {
    // 打包好的文件我们可以给他取名
    filename: 'bundle.js',
    // 打包出来的文件，我们要放到哪个文件夹下
    // path要跟一个绝对路径, 我们需要引入node的一个核心模块path
    // 然后引入这个模块的resolve方法
    // __dirname 实际指的就是webpack.config.js当前所在目录的路径
    path: path.resolve(__dirname, 'bundle')
  }
}

// 目前这个文件的总体意思就是：
// 1、他要求webpack从index.js打包
// 2、打包生成文件放到bundle文件夹下
// 3、生成的这个名字叫bundle.js

:::warning 然后我们运行一下：
npx webpack 进行打包 ::: :::success 为什么上面是npm webpack index.js，而这里就直接使用npx webpack呢？
原因很简单：
我们已经通过配置文件告诉webpack应该打包什么文件，所以不需要加上文件名 :::

<!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>我是主页面</title>
</head>
<body>
  <div id = "root"></div>
  <!--因为打包的位置改变了，所以这里也要调整-->
  <script src="./bundle/bundle.js"></script>
</body>
</html>

:::info 打包成功，虽然还是有警告。这个模式问题后面会解决。 :::

改名问题

我们刚刚有说过，webpack配置的名字是可以改动的。 我们来改动试试。

:::success 将webpack.config.js 改成 webpackconfig.js
当然，你也可以改其他名字，只要是js文件就可以 :::

然后，他就报错了

因为webpack找不到默认的配置文件。默认的配置文件必须叫webpack.config.js

如果我们一定要用我们当前的名字作为配置文件名，可以这样做： npx webpack —config webpackconfig.js

打包成功

结构优化

首先，像我们的content.js 、 header.js 、 index.js 、 sidebar.js 其实都是我们的项目源代码。他们并不会在浏览器中运行。因为只有打包后的最终代码才能运行，也就是说打包后的那个js文件才是我们浏览器要执行的js文件。

:::warning 一般我们会把这些源代码放到src的文件夹里面。 :::
既然我们改动了结构，那么配置文件肯定是需要改动的。

// node.js的文件模块
const path = require('path')
module.exports = {
  // entry的意思是我们这个项目从哪个文件开始打包
  entry: './src/index.js',
  // 打包的文件我们要放到哪里
  output: {
    // 打包好的文件我们可以给他取名
    filename: 'bundle.js',
    // 打包出来的文件，我们要放到哪个文件夹下
    // path要跟一个绝对路径, 我们需要引入node的一个核心模块path
    // 然后引入这个模块的resolve方法
    // __dirname 实际指的就是webpack.config.js当前所在目录的路径
    path: path.resolve(__dirname, 'dist')
  }
}

:::danger 但是，我们有没有发现一个问题。
我们在vue中，或者其他框架中，我们打包都是使用npm run 的命令。
那么如何做到使用npm run命令进行打包 :::

npm script

:::warning 在我们的项目中，有一个package.json文件。
他有一个scripts选项，它可以配置一些命令。
例如，我们希望创建一个bundle命令进行打包。 ::: 例子：

“scripts”: { “bundle”: “webpack” },

这里的意思是： 当我们运行bundle这个命令时，他会自动帮我们执行webpack这个命令。 他的原理是：当我们执行npm run bundle的时候，实际上就是执行package.json里面的bundle命令，这个bundle底层就是帮我们执行webpack的命令。而且这个webpack命令会先到工程中的node_modules里面先找是否安装了webpack,如果有会直接使用，如果没有自然会去全局安装里面找。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "描述",
  "private": true,
  "scripts": { 
    "bundle": "webpack"
  },
  "author": "chenYongRen",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2"
  }
}

其实我们现在的项目结构已经和我们平时vue的项目结构很类似了

然后我们再把index.html放到dist里面。

<!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>我是主页面</title>
</head>
<body>
  <div id = "root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

总结一下

我们用了三种方式进行webpack打包：

全局安装global webpack index.js的命令
局部安装local npx webpack index.js
局部安装local下使用npm scripts npm run bundle

其实归根结底都是在运行webpack命令。

webpack-cli

除了这里，有没有发现，我们在安装webpack的时候，同时安装了webpack-cli的包

他的作用是什么？

他的作用就是使我们可以在命令行里面正确的运行webpack的命令。 假设我们不安装webpack-cli这个包，那么我们就没有办法在命令行里面运行webpack或者npx webpack这样的指令。

知识补充

起步