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@<version>
需要说明的是，不推荐使用-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/indexand will output the result indist/main.jsminified and optimized for production.
Usually your projects will need to extend this functionality, for this you can create awebpack.config.jsfile 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文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
通过浏览器访问这个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 { <key>: string | [string] }
- (function: () => string | [string] | object { <key>: 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位）
网友评论