webpack 是什么？
webpack 是一个模块加载器兼打包工具，它能把各种资源，例如 js、ts、jsx、css、less、scss、图片等都作为模块来使用和处理。
先看一下本例中最终的目录结构
使用 webpack 前需先安装 NodeJS
直接上官网的例子
创建一个文件夹并切换到此文件夹
mkdir webpack-demo && cd webpack-demo
使用 npm init 初始化项目
npm init -y
此时目录下会生成一个 package.json 文件，该文件中记录着项目相关的信息。
**安装 webpack **
npm install --save-dev webpack
--save-dev 参数说明将 webpack 作为开发依赖安装。
安装 lodash （非 webpack 运行必须，只是后面的代码中会用到）
npm install --save lodash
--save 参数说明将 lodash 作为项目运行时依赖安装。
在项目根目录下创建一个子目录 app 并在此目录中创建 index.js 文件。
app/index.js
import _ from 'lodash';
function component () {
var element = document.createElement('div');
/* 下一行中会使用 lodash */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
新建一个 index.html 文件，打包好的文件在此文件中使用。
index.html
<html>
<head>
<title>webpack 2 demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
bundle.js 是最终生成的文件。
睁大眼睛仔细看，最重要的姿势来了。
webpack.config.js
在项目根目录下创建这个文件
// 引入 path 模块，这是 nodejs 内置的模块，用于处理路径
const path = require('path');
// 导出了一个对象，webpack 就是根据该对象对项目进行各种操作的
module.exports = {
// 入口文件，项目将从这个文件开始编译
entry: './app/index.js',
// 出口文件
output: {
filename: 'bundle.js', // 出口文件名称
path: path.resolve(__dirname, 'dist') // 出口文件路径
}
};
__dirname 表示该文件所在目录，在这个项目中 path.resolve(__dirname, 'dist') 表示的是 webpack-demo/dist 目录。
在配置一下 package.json 文件就可以运行了
打开 package.json
在 scripts 中加入 build 字段：
"scripts": {
"build": "webpack --config webpack.config.js --progress --colors"
}
可以看到 webpack 命令后有三个参数：
--config 指定使用的配置文件为 webpack.config.js
--progress 在控制台显示编译进度
--colors 指定控制台为彩色输出
好了，让我们来运行 webpack 吧
在控制台输入如下命令：
npm run build
最后，看到有如下输出则表示编译成功
> webpack-demo@1.0.0 build D:\workspace\webpack\webpack2\webpack-demo
> webpack --config webpack.config.js --progress --colors
Hash: b92a9f2483fc4492ccc9
Version: webpack 2.2.1
Time: 592ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./app/index.js 278 bytes {0} [built]
此时，项目根目录下会生成 dist/bundle.js 文件
现在，用浏览器打开 index.html 文件来见证一下奇迹吧。_
网友评论