杨信鹏的博客

# 起步

项目结构如下：

  webpack-example
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js
1
2
3
4
5

src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack example</title>
    <script src="https://unpkg.com/lodash"></script>
  </head>
  <body>
    <div>博客：</div>
    <script src="./index.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

src/index.js

function createContent(text) {
  const div = document.createElement("div");
  div.innerText = text;
  return div;
}

const nameText = createContent(_.join(["www", "hxin", "link"], "."));

document.body.appendChild(nameText);
1
2
3
4
5
6
7
8
9

打开index.html，正常运行，接下来将使用webpack打包改造。

# 改造

不通过<script>引入loadsh库，而是通过npm安装第三方包引入。

npm install lodash
1
 











import _ from "lodash";

function createContent(text) {
  const div = document.createElement("div");
  div.innerText = text;
  return div;
}

const nameText = createContent(_.join(["www", "hxin", "link"], "."));

document.body.appendChild(nameText);
1
2
3
4
5
6
7
8
9
10
11

注释引入lodash的<script>标签，将未处理的index.js改为打包后的文件dist/main.js。







 



 
 



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack example</title>
    <!-- <script src="https://unpkg.com/lodash"></script> -->
  </head>
  <body>
    <div>博客：</div>
    <!-- <script src="./index.js"></script> -->
    <script src="../dist/main.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 打包

可以 0 配置，直接使用webpack命令执行即可，默认时把src/index作为入口，dist/main.js作为输出结果。

./node_modules/.bin/webpack
1

注意

Windows 系统下还可能有权限问题，建议使用以下方式，效果相同。

package.json添加一个脚本命令

{
  // ...
  "scripts": {
    // ...
    "webpack": "webpack"
  }
}
1
2
3
4
5
6
7
npm run webpack
1

命令执行完后，就可以发现多了dist文件夹及main.js文件。再次打开index.html，是可以运行的。

# 使用配置文件

  webpack-example
+ |- webpack.config.js
  |- package.json
  |- index.html
  |- /src
    |- index.js
1
2
3
4
5
6
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    // path 必须是绝对路径，不能是相对路径。例如：'./dist/
    path: path.resolve(__dirname, "dist"),
  },
};
1
2
3
4
5
6
7
8
9
10

修改package.json中的打包命令，指定配置文件：

  // ...
  "scripts": {
    // ...
    "webpack": "webpack --config ./webpacl.config.js"
  }
1
2
3
4
5

注意

每个入口文件都会生成对应的一个文件，里面包含该文件的所有依赖和业务代码。后期需要分割代码，会在代码分离介绍。

← 文件处理 →