初步使用 | 黑豆的博客

# 初步使用

新建一个文件夹 webpack-demo ，在终端打开这个文件，执行如下命令生成 package.json 文件

npm init -y

安装 webpack

npm install webpack webpack-cli -D

新建如下文件，并将代码复制进去。

webpack-demo/src/content.js

export default function Content() {
  var root = document.getElementById('root');
  var content = document.createElement('div');
  content.innerText = 'content';
  root.appendChild(content);
}

webpack-demo/src/header.js

export default function Header() {
  var root = document.getElementById('root');
  var header = document.createElement('div');
  header.innerText = 'header';
  root.appendChild(header);
}

webpack-demo/src/sidebar.js

export default function Sidebar() {
  var root = document.getElementById('root');
  var sidebar = document.createElement('div');
  sidebar.innerText = 'sidebar';
  root.appendChild(sidebar);
}

webpack-demo/src/index.js

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

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

webpack-demo/dist/index.html

<!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>Document</title>
</head>
<body>
  <div id="root"></div>
  <!-- main.js文件是默认打包后的输出文件 -->
  <script src="./main.js"></script>
</body>
</html>

终端执行

npx webpack

然后在浏览器中打开 dist/index.html 文件，浏览器运行结果如下：

以上我们就完成了 webpack 的初次使用，是不是很简单呢😏

# 初步了解 webpack.config.js 配置文件

但是上面的操作有两个小问题：

dist 目录中默认输出的打包文件名为 main.js ，如果我们不想用 main 作为默认输出文件名改怎么办呢？
我们仔细看下，终端输出了如下警告：

怎么去掉这个警告呢？

创建 webpack.config.js 文件

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  }
}

mode 用于指定 webpack 使用相应模式的内置优化，它有三个值：production、development、none。如果没有设置，webpack 会给 mode 的默认值设置为 production。

选项	描述
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称，FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin 。
none	不使用任何默认优化选项

entry 用于指定 webpack 打包的入口文件
output 用于指定 webpack 的输出配置，filename 用于指定打包输出后的文件名
path 指定打包后的输出文件名

删除之前 dist 目录下的 main.js 文件，再次在终端运行 npx wepback 命令，发现警告没有了。查看输出 dist 目录，输出了 index.js 文件。

← 安装打包静态资源 →