一、webpack的介绍
什么是webpack?
- webpack是一个模块打包器(bundler)
- 在webpack看来,前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
- 它将根据模块的依赖关系进行静态分析,生成对应的静态资源
理解Loader:
- webpack本身只能加载js/json模块,如果要加载其它类型的文件(模块),就需要使用对应的loader进行转换/加载
- Loader本身也是运行在node.js环境中的javascript模块
- 它本身是一个函数,接受源文件作为参数,返回转换的结果
- loader一般以 xxx-loader 的方式命名,xxx代表这个loader 要做的转换功能,比如 json-loader
配置文件(默认)
webpack.config.js :是一个node模块,返回一个json 格式的配置信息对象
插件:
- 插件可以完成一些loader不能完成的功能
- 插件的使用一般是在webpack的配置信息plugins选项中指定
- CleanWebpackPlugin :自动清除指定文件夹的资源
- HtmlWebpackPlugin :自动生成html文件夹
- UglifyJSPlugin :压缩js文件
二、学习文档
webpack官网:http://webpack.github.io/
webpack3文档(中文): https://doc.webpack-china.org/
三、开启项目
1、初始化项目:
生成package.json文件
{
"name":"webpack_test",
"version":"1.0.0"
}
2、安装webpack
----npm i webpack -g //全局安装
----npm i webpack --save-dev //局部安装
下载1.0的
-----npm i [email protected] --save-dev这里讲一下为什么要先全局安装后再局部安装,是因为webpack版本问题,1.0和3.0的版本互不兼容,你电脑上面是用的webpack3.0的,公司的项目使用的是1.0的,此时公司项目对于你的电脑就不兼容,你就在你的文件目录下局部安装一个1.0的。
四、编译打包应用
* 创建入口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 //webpack 打包的文件(入口) 打包后的文件(出口)会新建文件夹
* 查看页面效果
五、添加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
```
* 查看页面效果
六、使用webpack配置文件
* 创建webpack.config.js
```
const path = require('path'); //path内置的模块,用来设置路径。
module.exports = {
entry: './src/js/entry.js', // 入口文件
output: { // 输出配置
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') //输出文件路径配置
}
};
```
* 配置npm命令: package.json
```
"scripts": {
"build": "webpack"
},
```
* 打包应用
```
npm run build
七、打包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加载的样式动态地应用到页面中
'css-loader' //只负责加载css模块,没办法把css加载应用到当前页面中
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader', //好处:打包小于8k的文件,把文件打包成base64放入js文件中,以便少发一次请求(请求图片)
options: {
limit: 8192
}
}
]
}
]
}
```
* 向应用中添加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 id="box1"></div>
<div id="box2"></div>
* 执行打包命令:
```
npm run build
```
* 发现问题:
* 大图无法打包到entry.js文件中,index.html不在生成资源目录下。
* 页面加载图片会在所在目录位置查找,导致页面加载图片时候大图路径无法找到
* 解决办法:
* 使用publicPath : 'dist/js/' //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。这种方 法带有强制性,说明以后找文件都在js下找
* 将index.html放在dist/js/也可以解决。
八、自动编译打包(热加载)
* 利用webpack开发服务器工具: webpack-dev-server
* 下载
- npm install --save-dev webpack-dev-server
* webpack配置
devServer: {
contentBase: './dist'//webpack-dev-server默认服务于根路径下index.html,contentBase引导webpack-dev-server指向某一个文件夹下的 index.html
},
* package配置
- "start": "webpack-dev-server --open"
* 编译打包应用并运行
- npm start
九、使用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 lang="en">
<head>
<meta charset="UTF-8">
<title>webpack test</title>
</head>
<body>
<div id="app"></div>
<!--打包文件将自动通过script标签注入到此处-->
</body>
</html>