webpack4 - 1.打包js

webpack是前端工程化中的热门工具，市面上一些热门前端框架（例如React、Vue.js）使用webpack作为搭建脚手架。

webpack是一个javascript应用的静态模块打包工具，它可以通过npm（node.js package magager）来安装。

1.环境准备及初始化项目

npm是node.js中的包管理器，所以要使用npm就需要安装node.js。

1.1 安装node.js 10.x后查看node与npm版本

$ node -v
v10.5.0
$ npm -v
6.1.0

1.2 创建项目目录，使用`npm init`初始化

mkdir webpack-demo && cd webpack-demo
npm init -y

初始化完成后，目录下会生成package.json（package.json类似Gradle项目中的build.gradle）

1.3 安装最新版本webpack

要使用webpack4以上版本还需要同时安装webpack-cli

npm install --save-dev webpack webpack-cli

如果要安装指定版本webpack，需要以@跟版本号

npm install --save-dev webpack@

需要说明的是，不推荐使用-g选项全局安装webpack，这样在项目根目录下无法直接使用webpack命令，需要在package.json中添加scripts来执行webpack命令，或者在项目根目录下指定webpack路径./node_modules/.bin/webpack

2.打包js文件

自webpack4.0起，webpack.config.js不再是必须的配置文件，但依然是默认的配置文件。如果要使用其它文件作为webpack的配置文件，可以在package.js中指定。

"scripts": {
  "build": "webpack --config prod.config.js"
}

以下说明来自官方文档

Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is src/index and will output the result in dist/main.js minified and optimized for production.
Usually your projects will need to extend this functionality, for this you can create a webpack.config.js file in the root folder and webpack will automatically use it.

官方说明看到这里，我们来动手实践webpack打包js。

2.1 使用默认配置打包js

首先，创建src目录，并在其中创建index.js，这是webpack4中默认的入口点。

src/index.js

import test from './js/test'
alert(test())

其中引入了另一个.js文件src/js/test.js
src/js/test.js

export default function () {
    return "test..."
}

准备工作完成后，在项目根目录下执行webpack命令，项目目录下会生成dist/main.js文件

$ webpack
Hash: b06f2adf972d04e44db0
Version: webpack 4.18.0
Time: 348ms
Built at: 09/11/2018 10:59:54 PM
  Asset       Size  Chunks             Chunk Names
main.js  968 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 93 bytes {0} [built]
    | ./src/index.js 42 bytes [built]
    | ./src/js/test.js 51 bytes [built]

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.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

创建一个html文件dist/index.html，引用打包生成的js文件




    
    Title

通过浏览器访问这个html页面，能够看到src/index.js中的内容正常执行，表明js文件打包成功了。

2.2 使用配置文件打包js

准备配置文件webpack.config.js

const path = require('path');

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

删除2.1中打包生成的main.js，再次执行webpack命令，会在dist目录生成index.js文件。

$ webpack
Hash: 795f73ebde696d657bbc
Version: webpack 4.18.0
Time: 99ms
Built at: 09/12/2018 10:18:42 PM
   Asset      Size  Chunks             Chunk Names
index.js  4.49 KiB    main  [emitted]  main
Entrypoint main = index.js
[./src/index.js] 42 bytes {main} [built]
[./src/js/test.js] 51 bytes {main} [built]

2.3 多入口配置

entry选项描述的是入口，入口是应用程序的起点，应用从这里开始执行。支持的格式如下，个人建议使用对象的格式，最为灵活。

string
[string]
object { : string | [string] }
(function: () => string | [string] | object { : string | [string] })

接着尝试打包多入口项目。

将webpack.config.js修改如下

const path = require('path');

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

在src目录下创建index1.js和index2.js，其中分别导入了src/js/test1.js和src/js/test2.js（这里并不一定要导入其它js文件只是为了跟踪打包过程），再次执行webpack命令，

$ webpack
Hash: f0b5d4e569be38591c1e
Version: webpack 4.18.0
Time: 108ms
Built at: 09/12/2018 10:53:44 PM
    Asset      Size  Chunks             Chunk Names
 index.js  4.49 KiB   index  [emitted]  index
index1.js   4.5 KiB  index1  [emitted]  index1
index2.js   4.5 KiB  index2  [emitted]  index2
Entrypoint index = index.js
Entrypoint index1 = index1.js
Entrypoint index2 = index2.js
[./src/index.js] 42 bytes {index} [built]
[./src/index1.js] 45 bytes {index1} [built]
[./src/index2.js] 45 bytes {index2} [built]
[./src/js/test.js] 51 bytes {index} [built]
[./src/js/test1.js] 52 bytes {index1} [built]
[./src/js/test2.js] 52 bytes {index2} [built]

补充说明：

entry

entry中使用对象格式时，每个key的值支持数组的形式，例如

entry: {
    index:   ['./src/index.js', './src/index1.js', './src/index2.js']
}

表示将src/index.js、src/index1.js、src/index2.js同时打包到生成的dist/index.js文件中。

output

output中的filename选项支持为生成的文件添加hash后缀，这在防止缓存时很有用，例如

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash:8].js'
}

打包生成的文件名类似index.ee3851d8.js，其中:8指定hash的长度（默认为20位）