# 从零开始webpack 01
# 前置知识
# npx指令
npx
帮你在本地（可以是项目中的也可以是本机的）寻找这个 command
- 找到了： 就用本地的版本
- 没找到： 直接下载最新版本，完成命令要求
使用完之后不会在你的本机或者项目留下任何东西
因此优势总结：
- 不会污染本机
- 永远使用最新版本的dependency（依赖包）
# About webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
# 核心概念
入口(entry)
告知webpack打包的文件入口
输出(output)
指定在哪里输出构建的bundles，以及如何命名这些文件，默认值为 ./dist。
loader
使loader 让 webpack 能够去处理那些非 JavaScript 文件
插件(plugins)
插件比loader功能更加广泛，从打包优化和压缩，一直到重新定义环境中的变量。
# Get Start
# Local Installation
本地安装webpack和webpack-cli脚手架
npm install --save-dev webpack
npm install --save-dev webpack-cli
2
# Basic Setup
首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
2
3
# 解决一个基本打包问题
# 现在我们将创建以下目录结构、文件和内容：
project
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
2
3
4
5
src/index.js
function component() {
var element = document.createElement('div');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
2
3
4
5
6
7
8
9
10
index.html
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
2
3
4
5
6
7
8
9
10
我们还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 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.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 现在将项目依赖文件抽离出来
将html的cdn资源通过本地安装，将多个JavaScript引用改为单个main.js引用
修改后项目结构如下
project
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
2
3
4
5
6
7
src/index.js
+ import _ from 'lodash';
+
function component() {
var element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
+ // Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
2
3
4
5
6
7
8
9
10
11
12
13
dist/index.html
<!doctype html>
<html>
<head>
<title>起步</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>
2
3
4
5
6
7
8
9
10
11
# 使用命令行对项目进行打包
npx webpack
# 当我们遇上更复杂的需求时需要自定义配置文件
project
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
2
3
4
5
6
7
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
2
3
4
5
6
7
8
9
使用命令行对项目进行打包
npx webpack --config webpack.config.js
也可直接使用
npx webpack
2
3
如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
为了让每一个开发者使用相同构建脚本可以在package.json中设置一个build的快捷方式
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.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
使用新指令构建项目
npm run build
通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。
这样我们就完成了一个简单项目的处理了
这样我们就完成了一个简单项目的处理了