webpack 初体验

本贴最后更新于 1164 天前,其中的信息可能已经渤澥桑田

背景

webpack 是一个模块打包器,用于编译 JavaScript 模块。

初体验

安装

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack webpack-cli

查看版本: 本文中版本为 4.25.1

$ node_modules/.bin/webpack -v
4.25.1

说明:

安装一个要打包到生产环境的安装包时,你应该使用 npm install --save
安装一个用于开发环境的安装包(例如,linter, 测试库等),你应该使用 npm install --save-dev

无 webpack 时的页面文件

两个文件

index.html
src
└── src/index.js

index.html

index.html,内容如下:

<!doctype html>
<html>
	<head>
		<title>起步</title>
		<script src="https://unpkg.com/[email protected]"></script>
	</head>
	<body>
		<script src="./src/index.js"></script>
	</body>
</html>

src/index.js

src/index.js 内容如下:

function component() {
  var element = document.createElement('div');

  // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

效果验证

用浏览器打开 index.html,效果如下:

Hello webpack

适配到 webpack 上

安装 lodash

上面是通过 script 脚本引入的外部 lodash 库。

这里我们希望把 lodash 打包到本地的 js 文件中,不再依赖外部 js 脚本。

因此先安装 lodash 库。

$ npm install --save lodash

因为 lodash 要发布,所以用为 --save。如果只用于开发而不发布的话,那就用 --save-dev

dist/index.html

将 index.html 移动到 dist 目录下,内容如下:

<!doctype html>
<html>
    <head>
        <title>起步</title>
    </head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

src/index.js

src/index.js,内容如下:

import _ from 'lodash';

function component() {
    var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component());

打包

$ npx webpack
Hash: b75da8f7583b35825ca3
Version: webpack 4.25.1
Time: 2828ms
Built at: 11/17/2018 11:57:02 AM
  Asset      Size  Chunks             Chunk Names
main.js  70.5 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 264 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

可见生成了 dist/main.js 文件

效果验证

用浏览器打开 index.html,效果如下:

Hello webpack

同时,通过检查,可以看到没有对外部 js 文件的请求。

原理

执行 npx webpack 打包里,会将 入口起点 下的脚本,打包到 输出 目录下。

如果不使用默认值的话,我们可以通过配置文件来指定其具体的值。

定制配置

如果我们要输出到 bundle.js 文件,而不是 main.js 文件,则可以这样做:

编辑文件 webpack.config.js,内容如下:

const path = require('path');

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

执行打包

npx webpack --config webpack.config.js
Hash: 33fcbd13f7bbedec8155
Version: webpack 4.25.1
Time: 2723ms
Built at: 11/17/2018 12:14:50 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  70.5 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[1] ./src/index.js 264 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

可见生成了 dist/bundle.js 文件。

使用 npm 脚本打包

除了使用这样 cli 方式进行打包外,还可以更方便的使用 npm 脚本进行打包。

编辑 package.json 文件,增加 script.build 一行,如下:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

打包:

npm run build

> [email protected] build /Users/note/web/webpack-demo
> webpack

Hash: 33fcbd13f7bbedec8155
Version: webpack 4.25.1
Time: 368ms
Built at: 11/17/2018 12:24:04 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  70.5 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[1] ./src/index.js 264 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

可见同时使用了 webpack.config.js 文件,生成了 bundle.js 文件。

下一步

更详细的配置,请参见原文 webpack 中文文档

参考

  • Web
    113 引用 • 429 回帖 • 8 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...