参考资料
安装
目录结构
引用 npm 包，编写页面代码
webpack 配置
【附】学习环境的搭建

参考资料

中文指南: https://webpack.docschina.org/guides/installation/
English Guide: https://webpack.js.org/guides/getting-started/
Webpack 4 搭建 Vue 项目:https://juejin.im/post/5b7d350951882542f3278b11

安装

安装在项目目录中：

1
2
3

npm install --save-dev webpack
or
npm install --save-dev webpack@<version>

对于 webpack v4+ 版本，需要安装 CLI

1	npm install --save-dev webpack-cli

目录结构

构造一个 npm 项目，使用：

1	npm init -y

安装 webpack

1	npm install webpack webpack-cli --save-dev

在根目录下创建 src/index.js 和 dist/index.html，此时的目录结构如下所示：

hello-world
|- dist
  |- index.html
|- src
  |- index.js
|- package.json

引用 npm 包，编写页面代码

这里用到 lodash 作为示例（lodash，一个 JavaScript 工具库）

1	npm install lodash --save

src/index.js

import _ from 'lodash';


function createBody() {
    let el = document.createElement('div');

    // 使用 lodash 工具库搭建页面
    el.innerHTML = _.join(['Hello', 'Webpack'], ', ');

    return el;
}

// 插入到文档的 body 中
document.body.appendChild(createBody());

dist/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Webpack</title>
</head>

<body>
    <script src="main.js"></script>
</body>

</html>

这样，基本的文件目录和页面就构建完毕，此时，执行

1	npx webpack

可以看到

PS E:\codes\used-for-learning-and-testing\webpack\Hello-World> npx webpack
Hash: 5dd32432e8cefa8f46b5
Version: webpack 4.43.0
Time: 3084ms
Built at: 2020-05-01 9:13:31
  Asset      Size  Chunks             Chunk Names
main.js  71.8 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 296 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to 
enable defaults for each environment.                                                                                                           enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

在 dist 目录下生成了一个 main.js

点击 index.html，可以看到页面的效果

接下需要对 webpack 进行配置，解决一些问题。（比如：这个 main.js 为什么会生成？）

webpack 配置

在根目录下创建 webpack.config.js

webpack.config.js

const path = require('path');

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

这边指定了该 webpack 项目的入口文件为 src/index.js，输出的文件名为 main.js，输出路径为根目录下的 dist 文件夹。（这些是 webpack 的默认设置，配置参考）

【附】学习环境的搭建

在学习 webpack 的过程中，我创建了一个单独的文件夹存放 webpack 工程

如果每次创建一个工程都要创建一次 npm 项目并安装 webpack，将会造成资源浪费，因此直接将所需的所有资源安装在每个测试工程的上级目录，不影响使用

并且在 package.json 文件中，把"main": "index.js"去掉，并加上"private": true，避免意外发布项目。

要安装外部包时，统一装在父目录下，装好后回到子目录运行 webpack

1
2
3

cnpm i lodash -S
cd Hello-World
npx webpack

03的开发日志

Webpack 学习笔记（一）第一次打包

参考资料

安装

目录结构

引用 npm 包，编写页面代码

webpack 配置

【附】学习环境的搭建