# 起步

# 创建项目结构

现在我们来创建基本的项目结构,它可能是下面这样

|-- webpack-vuepress
|   |-- index.html
|   |-- index.js
|   |-- package.json
1
2
3
4

其中package.json是利用下面的命令自动生成的配置文件

$ npm init -y
1

# 添加基础代码

在创建了基本的项目结构以后,我们需要为我们创建的文件添加一些代码

index.html页面中的代码:

<p>这是最原始的网页内容</p>
<div id="root"></div>
<!-- 引用打包后的js文件 -->
<script src="./dist/main.js"></script>
1
2
3
4

index.js文件中的代码:

console.log('hello,world');
1

# 安装Webpack

运行如下命令安装webpack4.0+webpack-cli

$ npm install webpack webpack-cli -D
1

# 添加配置文件

使用如下命令添加 Webpack 配置文件:

$ touch webpack.config.js
1

使用此命令,变更后的项目结构大概如下所示:

|-- webpack-vuepress
|   |-- index.html
|   |-- index.js
|   |-- webpack.config.js
|   |-- package.json
1
2
3
4
5

至此我们的基础目录已创建完毕,接下来需要改写webpack.config.js文件,它的代码如下:

解释

  1. entry配置项说明了webpack打包的入口文件。
  2. output配置项说明了webpack输出配置:filename配置了打包后的文件叫main.js
  3. path配置了打包后的输出目录为dist文件夹下
// path为Node的核心模块
const path = require('path');

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

# 改写package.json文件

改写说明

  1. 添加private属性并设置为true:此属性能让我们的项目为私有的,防止意外发布代码
  2. 移除main属性:我们的项目并不需要对外暴露一个入口文件
  3. 添加scripts命令:即我们的打包命令

改写后的package.json文件如下所示:





 

 










{
  "name": "webpack-vuepress",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "bundle": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 第一次打包

命令说明

npm run代表运行一个脚本命令,而bundle就是我们配置的打包命令,即npm run bundle就是我们配置的webpack打包命令。

运行如下命令进行项目打包:

$ npm run bundle
1

打包后的效果如下所示:

第一次打包后的效果

打包后的项目目录如下所示,可以看到我们多出了一个叫dist的目录,它里面有一个main.js文件

|-- webpack-vuepress
|   |-- dist
|   |   |-- main.js
|   |-- index.html
|   |-- index.js
|   |-- webpack.config.js
|   |-- package.json
1
2
3
4
5
6
7

打包成功后,我们需要在浏览器中运行index.html,它的运行结果如下图所示:

第一次打包后的效果

# 理解webpack打包输出

在上一节中,我们第一次运行了一个打包命令,它在控制台上有一些输出内容,这一节我们详细来介绍这些输出是什么意思:

第一次打包后的效果

  1. Hash: hash代表本次打包的唯一hash值,每一次打包此值都是不一样的

  2. Version: 详细展示了我们使用webpack的版本号

  3. Time: 代表我们本次打包的耗时

  4. Asset: 代表我们打包出的文件名称

  5. Size: 代表我们打包出的文件的大小

  6. Chunks: 代表打包后的.js文件对应的idid0开始,依次往后+1

  7. Chunks Names: 代表我们打包后的.js文件的名字,至于为何是main,而不是其他的内容,这是因为在我们的webpack.config.js中,entry:'./index.js'是对如下方式的简写形式:

// path为Node的核心模块
const path = require('path');

module.exports = {
  // entry: './index.js',
  entry: {
    main: './index.js'
  }
  // 其它配置
}
1
2
3
4
5
6
7
8
9
10
  1. Entrypoint main = bundle.js: 代表我们打包的入口为main

  2. warning in configuration: 提示警告,意思是我们没有给webpack.config.js设置mode属性,mode属性有三个值:development代表开发环境、production代表生产环境、none代表既不是开发环境也不是生产环境。如果不写的话,默认是生产环境,可在配置文件中配置此项,配置后再次打包将不会再出现此警告。

// path为Node的核心模块
const path = require('path');

module.exports = {
  // 其它配置
  mode: 'development'
}
1
2
3
4
5
6
7