官网链接：https://webpack.js.org/guides/getting-started/

这一章节讲述了一下 Webpack 的基本使用方法

一、基本设置

安装 webpack 时，一般要安装两个 package

  • webpack 是核心包
  • webpack-cli 是 webpack 的命令行工具
    1. yarn add -D webpack webpack-cli

package.json 中，可以做如下增减，这样可以防止我们不小心把代码发布出去

  • 新增 "private:true"
  • 删除 "main":"index.js"
    1. {
    2.   + "private": "true",
    3.   - "main": "index.js"
    4. }

二、创建 bundle

这里是一个简单的例子，来演示一下如何创建 bundle

首先，项目的目录结构如下

  1. webpack-demo
  2.     package.json
  3.     /dist
  4.         index.html
  5.     index.html
  6.     /src
  7.         index.js

command-line 安装 package

  1. yarn add lodash

/src/index.js 引入 module

  1. import _ from 'lodash';
  3.  function component() {
  4.    const element = document.createElement('div');
  5.    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  6.    return element;
  7.  }
  9.  document.body.appendChild(component());

/dist/index.html 引入 main.js

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <meta charset="utf-8" />
  5.      <title>Getting Started</title>
  6.    </head>
  7.    <body>
  8.     <script src="main.js"></script>
  9.    </body>
  10.  </html>

command-line 运行 webpack

  1. npx webpack

完成上述步骤后，打开 /dis/index.html，能够顺利看到 'Hello webpack' 这段文本啦

三、使用配置文件

Webpack 支持使用配置文件来做复杂的设置，这和我们一行一行输入命令相比，有更高的效率

新增 webpack.config.js 文件

  1. const path = require('path');
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'main.js',
  7.     path: path.resolve(__dirname, 'dist'),
  8.   },
  9. };

command-line 运行 webpack

  1. npx webpack --config webpack.config.js

如果 webpack.config.js 文件存在，Webpack 默认会使用这个配置，--config 选项能够我们选择其他名字的配置文件

除了使用 npx 命令运行 webpack 外，我们有更好的方式运行 webpack，那就是使用 npm 脚本，首先在 package.json 新增脚本

  1. {
  2.   "script": {
  3.       "build": "webpack"
  4.   }
  5. }

然后 command-line 中运行

  1. yarn build

四、小总结

以上内容讲解了 Webpack 的核心、基础功能，最后我们的项目结构如下

  1. webpack-demo
  2.     package.json
  3.     webpack.config.js
  4.     /dist
  5.         main.js
  6.         index.html
  7.     /src
  8.         index.js
  9.     /node_modules

「@浪里淘沙的小法师」