webpack 起步
找一个文件夹初始化 npm 项目 并安装依赖。
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
添加 npm script
"scripts": {
"build": "webpack --config webpack.config.js"
}
基本用法
给项目添加一些文件
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
# ./index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<!-- lodash js 库 -->
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
# ./src/index.js
function component() {
let element = document.createElement('div');
// _ 由 lodash js 库 提供
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
此外，还需要调整我们的package.json文件，以确保我们将包标记为私有，以及删除 main 选项。 这是为了防止意外发布您的代码。
{
"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": {}
}
这个例子 lodash 依赖是通过 <script> 引入的，是隐式并全局依赖的。
这会带来一些问题：
- 非显式依赖的。
- 如果依赖丢失，或已错误的顺序引入，程序将无法正常运作。
- 如果包含依赖项但未使用，浏览器依然会下载不必要的代码。
所以我们应该这样做：
Bundle 将相关依赖的代码捆绑在一起
以这样的方式引入依赖：
npm install --save lodash
# src/index.js
+ import _ from 'lodash';
+
function component() {
let 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());
Configuration 添加配置
在项目的根目录下添加 webpack 配置文件 webpack.config.js。
使用 node js 编程。
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
编译
npm run build
# 或者
npx webpack --config webpack.config.js
# --config 中 webpack.config.js 是默认值。如果你的配置文件是这样命名的，运行 webpack 命令时可以忽略此参数
配置文件比简单的CLI使用具有更大的灵活性。 我们可以通过这种方式指定加载器规则，插件，解析选项和许多其他增强功能。 更多信息可以看文档。
tips:
通过在npm run build命令和参数之间添加两个破折号，可以将自定义参数传递给webpack :npm run build -- --colors.
NEXT
现在已经有了基本构建，那么您应该转到下一个指南 assets 资产管理，以了解如何使用 webpack 管理图像和字体等静态资源。
