js-webpack自动化构建工具
###1.webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
四个核心概念：
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
1.xxx版本只能加载js文件，其余加载js/json文件；其他格式需使用对应的loader进行转换或加载
###2、开启项目
* 初始化项目：
* 生成package.json文件
*
```
{
"name": "webpack_test",
"version": "1.0.0"
}
```
* 安装webpack
- npm install webpack-cli -g //全局模式安装 webpack -h（4.0 需先配置config.js）
- npm install webpack -g //全局安装
- npm install webpack --save-dev //局部安装
###3、编译打包应用
* 创建入口src/js/ : entry.js
- document.write("entry.js is work");
* 创建主页面: dist/index.html
- <script type="text/javascript" src="bundle.js"></script>
* 编译js
- webpack src/js/entry.js dist/bundle.js
src/js/entry.js 源文件 dist/bundle.js 目标文件路径
* 查看页面效果
###4、添加js/json文件
* 创建第二个js: src/js/math.js
```
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}
```
* 创建json文件: src/json/data.json
```
{
"name": "Tom",
"age": 12
}
```
* 更新入口js : entry.js
```
import {cube} from \'./math\'
import data from \'../json/data.json\'
//注意data会自动被转换为原生的js对象或者数组
document.write("entry.js is work <br/>");
document.write(cube(2) + \'<br/>\');
document.write(JSON.stringify(data) + \'<br/>\')
```
* 编译js:
```
webpack src/js/entry.js dist/bundle.js
```
* 查看页面效果
###5、使用webpack配置文件
* 创建webpack.config.js
```
const path = require(\'path\'); //path内置的模块，用来设置路径。
module.exports = {
mode: \'production\',
entry: \'./src/js/entry.js\', // 入口文件
output: { // 输出配置
filename: \'bundle.js\', // 输出文件名
path: path.resolve(__dirname, \'dist\') //输出文件路径配置
}
};
```
* 配置npm命令: package.json
```
"scripts": {
"build": "webpack"
},
```
* 打包应用
```
npm run build
```
###6、打包css和图片文件
* 安装样式的loader
```
npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
```
* 配置loader
```
module: {
rules: [
{
test: /\.css$/,
use: [
\'style-loader\',
\'css-loader\'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: \'url-loader\',
options: {
limit: 8192 // 小于8kb的图片设为Base 64编码 打包到js模块中
}
}
]
}
]
}
```
* 向应用中添加2张图片:
* 小图: img/logo.png
* 大图: img/big.jpg
* 创建样式文件: src/css/test.css
```
body {
background: url(\'../img/logo.jpg\')
}
```
* 更新入口js : entry.js
- import \'../css/test.css\'
* 添加css样式
#box1{
width: 300px;
height: 300px;
background-image: url("../image/logo.jpg");
}
#box2{
width: 300px;
height: 300px;
background-image: url("../image/big.jpg");
}
* index.html添加元素
<div ></div>
<div ></div>
* 执行打包命令：
```
npm run build
```
* 发现问题：
* 大图无法打包到entry.js文件中，index.html不在生成资源目录下。
* 页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到
* 解决办法：
* 使用publicPath : \'dist/js/\' //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。
* 将index.html放在dist/js/也可以解决。
###7、自动编译打包
* 利用webpack开发服务器工具: webpack-dev-server
* 下载
- npm install --save-dev webpack-dev-server
* webpack配置
devServer: {
contentBase: \'./dist\'
},
* package配置
- "start": "webpack-dev-server --open"
* 编译打包应用并运行
- npm start
###9、使用webpack插件
* 常用的插件
* 使用html-webpack-plugin根据模板html生成引入script的页面
* 使用clean-webpack-plugin清除dist文件夹
* 使用uglifyjs-webpack-plugin压缩打包的js文件
* 下载
```
npm install --save-dev html-webpack-plugin clean-webpack-plugin
```
* webpack配置
const HtmlWebpackPlugin = require(\'html-webpack-plugin\'); //自动生成html文件的插件
const CleanWebpackPlugin = require(\'clean-webpack-plugin\'); //清除之前打包的文件
plugins: [
new HtmlWebpackPlugin({template: \'./index.html\'}),
new CleanWebpackPlugin([\'dist\']),
]
* 创建页面: index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>webpack test</title>
</head>
<body>
<div ></div>
<!--打包文件将自动通过script标签注入到此处-->
</body>
</html>
* 打包运行项目
```
npm run build
npm start
```