官方文档：https://www.webpackjs.com/guides/getting-started/
安装 webpack
首先我们的文档结构如下：
webpack-demo
|- /dist
|- index.html
|- /src
|- index.js
为了使用 npm 做包管理我们先做初始化：
npm init -y
在本地安装 webpack：
npm install webpack webpack-cli --save-dev
安装的是 webpack 和 webpack-cli 两个包，前者是 webpack 的核心部分，后者是 webpack 的命令行工具。
--save-dev 表示该包安装到开发环境依赖。
现在文档结构是这样：
webpack-demo
|- /dist
|- index.html
|- /node_modules
|- 安装的包保存在此
|- ...........
|- /src
|- index.js
|- package-lock.json
|- package.json
前期准备
src/index.js 代码如下：
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// 用 Lodash 拼接生成新的字符串并写入页面 HTML
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
注意，我们这里引用了字符串处理的库 lodash，所以我们应该先使用 npm 安装：
npm install lodash --save
在安装一个要打包到生产环境的安装包时，你应该使用 npm install --save。
如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev。
dist/index.html 代码如下：
<!doctype html>
<html>
<head>
<title>webpack 入门</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
注意，script 引入的 bundle.js 现在还不存在，等下用 webpack 把 js 文件打包后才会生成该文件。
简单打包
前期准备工作已经完成，现在开始用 webpack 打包。
最简单的方法是直接在根目录（webpack-demo）运行命令：
npx webpack
它会将我们的脚本（src/index.js）作为入口起点，然后把相关 js 文件打包好，输出为 dist/main.js。
在浏览器中打开 index.html，如果一切访问都正常（当然你需要修改一下 main.js 的文件名为 bundle.js），你应该能看到以下文本：'Hello webpack'。
配置文件
我们新添加一个配置文件 webpack.config.js，现在文档结构：
webpack-demo
|- /dist
|- index.html
|- /node_modules
|- 安装的包保存在此
|- ...........
|- /src
|- index.js
|- package-lock.json
|- package.json
|- webpack.config.js
webpack.config.js 代码如下：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
现在，让我们通过新配置文件再次运行 webpack：
npx webpack --config webpack.config.js
如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是为了说明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
另外，当在 windows 中通过调用路径去调用 webpack 时，必须使用反斜线。例如 node_modules\.bin\webpack --config webpack.config.js。
使用 npm 脚本
前一种方法在使用中并不方便，我们在 package.json 添加一个 npm 脚本(npm script)：
package.json：
{
"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.36.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。
网友评论