开始使用
Webpack 用于编译Javascript模块。一旦安装，你可以通过wepack的CLI 或者 API 与其进行“互动”。如果你是新手的话， 请看完核心概念，或者这篇理解去了解你为什么你要使用它而不是其他工具。
基础安装
首先创建一个文件夹，并且初始化NPM ，并且局部安装WEBPACK （有关局部安装，请查看 文章2),，再然后安装webpack-cli(这个工具用于命令行运行WEBPACK）：
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
在这篇指南中我们始终使用 diff 代码向你展示文件夹，文件以及代码的变化。
现在我们要创建一下文件夹结构，文件以及文件的内容
project
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
src/index.js
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());
index.html
Getting Started
我们依然需要判断我们的package.json 以确保我们将包标记为 "私有的(private)"， 最好将main entry 移除。 这样可以避免你的代码被意外发布(到 npm.js 之类的，我想)
如果你想学习更多package.json 的工作原理， 我们推荐你阅读 [npm documentation] (https://docs.npmjs.com/files/package.json)
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": {}
}
在上面示例中，必须要有依赖项存在于
使用这个方式管理Javascript项目会引发一下问题。
- 对于哪段脚本需要哪段外部库，显示不够直观。
- 如果一个依赖丢失，或者以错误的顺序引入，程序不能正常运行。
3.如果一个依赖被包含，但是并没有被使用，浏览器会强制下载不需要的代码。
webpack 可以有效解决以上问题。
创建一个 bundle
首先我们需要稍稍调整目录结构， 将 source code(/src) 从 distribution code(/dist)中分离出来。 "source" code 是我们即将要编辑的代码， 而 "distribution" code 是我们最小化并且优化后的输出代码，用以被浏览器加载。
project
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
如果要对index.js 绑定 lodash 依赖项， 我们需要局部安装这个库。
npm install --save lodash
当安装一个用于构建你产品的包的时候，你需要使用 "npm install --save"。如果你安装用于开发意图的包，(例如 linter, testing libraries, ..) ，则可以使用 "npm install --save-dev". 更多资讯请查阅 (npm document)[https://docs.npmjs.com/cli/install](国内可能无法访问）
现在可以将 lodash 引入我们的脚本：
+ 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());
现在，因为我们将要构建代码， 所以必须要更改 index.html 文件。 首先移除 lodash
- +