[webpack 学习系列] 3. webpack 入门
首先确保安装了 node 和 npm
基本安装：
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
下面我们创建如下的目录结构：
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
src/index.js
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
修改下我们的 package.json 文件，设置 private 为 true，代表我们的 npm 项目是私有的，不会发布到 npm 库中；移除 main 入口，避免向外暴露入口。
npm main
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {}
}
在这个例子中，有个隐式的依赖，index.js 依赖 lodash。因为 index.js 没有明确声明依赖 lodash，而是假设全局变量 _ 存在。
这种管理项目的方式会有点问题：
- 脚本依赖额外库不明显
- 如果依赖丢失或者引入顺序不对，都会报错
- 如果依赖包含了却没有使用，那么就会下载不必要的代码
下面让我们使用 webpack 来管理这些吧。
创建一个 bundle
修改我们的文件目录如下：
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
为了捆绑 lodash 到 index.js，我们需要安装 lodash。
npm install --save lodash
// 安装的包要打包到生产包使用 npm install --save，如果打包到开发包使用 npm install --save-dev
现在，在我们的脚本中导入 lodash：
src/index.js
+ import _ from 'lodash';
+
function component() {
const element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
修改 dist/index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="main.js"></script>
</body>
</html>
执行命令npx webpack，默认将使用我们 src/index.js 脚本文件作为我们的入口，生成dist/main.js作为输出。
打开 index.html 文件，我们将看到 'hello webpack'。
使用配置文件
上面我们使用了 webpack 的默认配置，但是许多项目需要一个很复杂的安装，这时候我们就需要 webpack 配置文件来帮我们高效地来管理了。比起在命令行手动输入命令，配置文件高效很多。
project:
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口
output: { // 出口
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
执行命令使用配置文件打包：
npx webpack --config webpack.config.js
webpack.config.js 文件存在的话，webpack 命令将默认使用该文件（即输入 npx webpack 即可）。通过 --config 我们可以灵活地制定配置文件。
npm 脚本
下面我们来使用 npm 脚本，这也是为什么我们上面安装了 webpack-cli 这个库的原因。
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"lodash": "^4.17.5"
}
}
这样我们就可以使用 npm run build 来代替 npx 了。
