webpack 入门（一）—— 安装和使用
Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。
这样，任何资源都可以成为 Webpack 可以处理的模块。
一、安装
需要先安装 Node.js
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack // 本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。
npm install webpack-dev-server --save-dev
二、起步
1、使用webpack管理前
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
<script>标签之间存在隐式依赖关系。index.js 文件执行之前，还依赖于页面中引入的 lodash。
src/index.js
-------------------
function component() {
var element = document.createElement('div');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
-------------------
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
2、使用webpack管理后
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
|- /src
|- index.js
安装lodash： npm install --save lodash
src/index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
dist/index.html
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
生成bundle.js : ./node_modules/.bin/webpack src/index.js dist/bundle.js
3、使用配置文件
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
执行config文件：./node_modules/.bin/webpack --config webpack.config.js
4、使用 NPM 脚本
package.json
{
...
"scripts": {
"build": "webpack"
},
...
}
构建：npm run build
三、管理资源
1、加载css
npm install --save-dev style-loader css-loader
webpack.config.js
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
可以在依赖于此样式的文件中 import './style.css'。现在，当该模块运行时，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。
2、加载图片
npm install --save-dev file-loader
webpack.config.js
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
curl -o src/icon.png http://www.freeiconspng.com/uploads/team-icon-21.png
- 当你
import MyImage from './my-image.png'，该图像将被处理并添加到 output 目录，并且 MyImage 变量将包含该图像在处理后的最终 url。 - 当使用 css-loader 时，你的 CSS 中的
url('./my-image.png')会使用类似的过程去处理。loader 会识别这是一个本地文件，并将 './my-image.png' 路径，替换为输出目录中图像的最终路径。 - html-loader 以相同的方式处理
<img src="./my-image.png" />。
3、加载字体
webpack.config.js
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
4、加载数据
加载数据如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。
四、管理输出
1、设定 HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
2、清理 /dist 文件夹
npm install clean-webpack-plugin --save-dev
