webpack笔记
This commit is contained in:
结发受长生
parent
131e7fbbd7
commit
21b68b67af
115
source/_posts/前端杂烩/webpack(1)-初见.md
Normal file
115
source/_posts/前端杂烩/webpack(1)-初见.md
Normal file
@ -0,0 +1,115 @@
|
||||
---
|
||||
title: webpack(1)-初见
|
||||
date: 2018-6-10 18:08:07
|
||||
tags:
|
||||
- webpack
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
现在越来越多的JS代码被用在页面上 , 如何去很好地组织这些代码 , 成为了一个必须要解决的问题
|
||||
不止有JS需要被模块化管理 , 前端当中很多的图片 css样式 , 都是需要被统一管理 , 方便进行扩展和维护的
|
||||
<!-- more -->
|
||||
|
||||
所以webpack有如下几个目标 :
|
||||
+ 将依赖树拆分
|
||||
+ 保证初始加载的速度
|
||||
+ 所有静态资源可以被模块化
|
||||
+ 可以整合第三方的库和模块
|
||||
+ 可以构造大型项目
|
||||
|
||||
|
||||
#### 使用方法 :
|
||||
|
||||
##### 安装
|
||||
1. 全局安装 `npm install webpack -g`
|
||||
2. 项目初始化
|
||||
`npm init` - 生成一个package.json文件
|
||||
`npm install webpack --save-dev` - 添加webpack依赖
|
||||
|
||||
##### webpack的配置
|
||||
每个项目下都必须有一个`webpack.config.js` , 它就相当于webpack的一个配置文件 , 告诉webpack该做什么
|
||||
|
||||
这里先写一个最基本的可用配置
|
||||
其实还有很多的配置项 , 具体可以查看官方文档
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
//页面入口文件配置
|
||||
//相当于执行这个JS文件可以直接或间接找到项目中用到的所有模块
|
||||
entry: {
|
||||
index : './src/entry.js'
|
||||
},
|
||||
//入口文件输出配置
|
||||
//最终要打包生成什么名字的文件, 放在哪里
|
||||
output: {
|
||||
path: __dirname,//表示当前目录
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
module: {
|
||||
//加载器配置
|
||||
//告诉webpack每一种类型文件都需要使用什么加载器来处理
|
||||
loaders: [
|
||||
{ test: /\.css$/, loaders: ["style-loader","css-loader"] }
|
||||
]
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
现在可以在项目当中创建`src`目录 , 并在其中创建entry.js文件和content.js文件
|
||||
|
||||
content.js
|
||||
```javascript
|
||||
//这个文件相当于项目中所用到的一个模块
|
||||
module.exports = "现在的内容来自于content.js文件";
|
||||
```
|
||||
entry.js
|
||||
```javascript
|
||||
//这是我们定义的入口文件, 引用content模块
|
||||
document.write(require("./content.js"));
|
||||
```
|
||||
|
||||
在项目目录下执行`webpack`命令
|
||||
可以看到在项目目录下生成了打包后的bundle.js
|
||||
|
||||
编写页面html文件
|
||||
```xml
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
</head>
|
||||
<body>
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
然后可以访问页面 , 看到JS被正确执行了
|
||||
|
||||
##### 使用加载器
|
||||
可以使用加载器去加载一个CSS文件 , 在页面中就不需要对这个样式文件进行引入了
|
||||
打包后的JS会执行把这个文件中包含的样式加入到页面当中的动作
|
||||
需要安装`css-loader`和`style-loader`这两个模块
|
||||
|
||||
```bash
|
||||
$ npm install css-loader style-loader --save-dev
|
||||
```
|
||||
然后编写自己的css文件
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color : #ccc;
|
||||
}
|
||||
```
|
||||
修改entry.js文件 , 引入这个css文件
|
||||
```javascript
|
||||
require("!style!css!./style/style.css");
|
||||
document.write(require("./content.js"));
|
||||
```
|
||||
> 这里因为已经在配置文件中指定了.css文件所使用的加载器 , 所以也可以直接写`require("./style/style.css")`
|
||||
|
||||
|
||||
css-loader是用于在JS当中加载CSS文件
|
||||
style-loader是用于将CSS文件的样式加载到页面当中
|
||||
|
||||
重新执行webpack命令即可
|
||||
|
||||
145
source/_posts/前端杂烩/webpack(2)-进阶.md
Normal file
145
source/_posts/前端杂烩/webpack(2)-进阶.md
Normal file
@ -0,0 +1,145 @@
|
||||
---
|
||||
title: webpack(2)-进阶
|
||||
date: 2018-6-10 18:26:54
|
||||
tags:
|
||||
- webpack
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
#### 开发工具
|
||||
使用`webpack-dev-server`可以在本地启动一个服务 , 用来访问和调试构建出的页面
|
||||
首先执行全局安装
|
||||
```bash
|
||||
$ npm install -g webpack-dev-server
|
||||
```
|
||||
<!-- more -->
|
||||
使用方法
|
||||
在项目目录下首先使用`webpack --progress`进行打包
|
||||
|
||||
|
||||
然后使用`webpack-dev-server --progress`启动服务
|
||||
|
||||
|
||||
为了方便 , 我们也可以把这两个命令配置为npm的脚本
|
||||
在package.json当中
|
||||
```json
|
||||
{
|
||||
"name": "webpack_demo",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build":"webpack --progress",
|
||||
"start":"webpack-dev-server --progress"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"css-loader": "^0.26.1",
|
||||
"style-loader": "^0.13.1",
|
||||
"webpack": "^1.14.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
之后执行`npm run build`和`npm run start` , 就相当于是直接执行这两个命令
|
||||
|
||||
|
||||
#### 加载器
|
||||
上一节当中有用到了css加载器 , 将.css文件的内容直接嵌入到页面当中
|
||||
还有很多第三方的加载器 , 可以给开发提供方便
|
||||
|
||||
##### 资源文件加载器 file-loader
|
||||
用于加载项目中用到的静态资源文件 , 例如图片 字体等
|
||||
```bash
|
||||
$ npm install file-loader --save-dev
|
||||
```
|
||||
webpack.config.js
|
||||
```javascript
|
||||
module.exports = {
|
||||
entry: {
|
||||
index : './src/entry.js'
|
||||
},
|
||||
output: {
|
||||
path: __dirname+"/dist",
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loaders: ["style-loader","css-loader"] },
|
||||
//配置资源文件所对应的文件类型(正则)
|
||||
{ test: /\.(png|jpg|gif|svg|woff|woff2|ttf|eot)$/, loader: "file-loader" }
|
||||
]
|
||||
}
|
||||
};
|
||||
```
|
||||
比如在css文件当中引用了一个图片文件
|
||||
```css
|
||||
body {
|
||||
background-color: #ccc;
|
||||
}
|
||||
#testImg {
|
||||
width:200px;
|
||||
height:200px;
|
||||
background-image: url("../images/test.png");
|
||||
}
|
||||
```
|
||||
执行打包之后就会根据图片的哈希码作为命名在输出目录下生成一个图片文件
|
||||
|
||||
|
||||
并且对应的css样式也会被替换
|
||||
|
||||
|
||||
##### 图片加载器 url-loader
|
||||
图片加载器是用于把项目中用到的图片转化为base64编码
|
||||
( 这个编码在img元素的src 或者 css样式当中都是可用的 )
|
||||
|
||||
```bash
|
||||
$ npm install url-loader --save-dev
|
||||
```
|
||||
同样使用上面的例子当中css样式里面对图片的引用
|
||||
加载器的配置修改为
|
||||
```javascript
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loaders: ["style-loader","css-loader"] },
|
||||
{ test: /\.(png|jpg|gif)$/, loader: "url-loader" }
|
||||
]
|
||||
}
|
||||
```
|
||||
执行打包和发布运行后
|
||||
|
||||
|
||||
---
|
||||
**补充 : **
|
||||
在项目当中 , 我们通常把较小的图片文件转化为base64编码 , 较大的图片文件则直接保留原文件
|
||||
避免js文件太过臃肿 , 加载缓慢
|
||||
`url-loader`提供了一个`limit`参数 , 可以对图片的大小进行限制 ( 单位是字节 ) , 小于该值的由url-loader处理
|
||||
大于这个值的 , 则直接交给`file-loader`处理
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
//...(其他配置项)
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loaders: ["style-loader","css-loader","postcss-loader"]},
|
||||
{ test: /\.(png|jpg|jpeg|gif)$/, loader: "url-loader" , query :{limit:20000,name:"[name]-[hash:8].[ext]",publicPath:"../images/",outputPath:"images/"}},
|
||||
//会将图片转化为base64编码直接写入到js文件当中
|
||||
// { test: /\.(png|jpg|jpeg|gif|svg|eot)$/, loader: "file-loader", query :{name:"images/[name]-[hash:8].[ext]"}},
|
||||
{ test: /\.(svg|eot)$/, loader: "file-loader", query :{name:"[name]-[hash:8].[ext]",publicPath:"../fonts/",outputPath:"fonts/"}},
|
||||
//注意 : file-loader配置的文件类型匹配不要和url-loader冲突
|
||||
]
|
||||
}
|
||||
};
|
||||
```
|
||||
此时传递给url-loader的参数 , 如果资源文件被交给了file-loader来处理 , 这些参数也会传给file-loader
|
||||
name就属于给file-loader去用的参数 , 代表打包以后文件的命名规则
|
||||
打包后的结果如下
|
||||
|
||||
|
||||
|
||||
---
|
||||
其他常用的加载器还有
|
||||
+ json处理 - `json-loader`
|
||||
+ html处理 - `raw-loader`
|
||||
101
source/_posts/前端杂烩/webpack(3)-补充.md
Normal file
101
source/_posts/前端杂烩/webpack(3)-补充.md
Normal file
@ -0,0 +1,101 @@
|
||||
---
|
||||
title: webpack(3)-补充
|
||||
date: 2018-6-10 18:29:17
|
||||
tags:
|
||||
- webpack
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
#### 文件变更监控
|
||||
在开发过程中通常需要对代码进行频繁的修改
|
||||
并且同时查看效果
|
||||
在webpack命令加入`--watch`参数可以启动一个进程执行文件的监控
|
||||
如果文件发生改变会自动再次执行打包
|
||||
比如
|
||||
```bash
|
||||
webpack hello.js bundle.js --watch
|
||||
```
|
||||
<!-- more -->
|
||||
#### 分装打包
|
||||
对于不同的功能模块 , 如果我们不希望将其打包在一起 , 可以去指定多个入口文件
|
||||
```javascript
|
||||
//...
|
||||
entry: {
|
||||
bundle1 : './src/entry.js',
|
||||
bundle2 : "./src/entry2.js"
|
||||
},
|
||||
output: {
|
||||
path: __dirname+"/dist",
|
||||
filename: '[name].js'
|
||||
},
|
||||
// ...
|
||||
```
|
||||
为了避免打包后输出的目标文件互相覆盖 , 我们需要对打包后的目标文件名进行动态命名
|
||||
`[name]` 代表以入口文件的名称命名 , 例如上面的配置打包之后获得的就是 bundle1.js和 bundle2.js两个文件
|
||||
`[chunkhash]`代表文件模块快照的hash值进行命名 , 例如bundle.[chunkhash].js
|
||||
|
||||
> 如果**只是**使用`[hash]`则不会进行分装打包 , 最终的结果还是一个文件
|
||||
|
||||
---
|
||||
### 使用插件
|
||||
webpack提供了丰富的扩展机制 , 除了各种加载器之外 , 还有就是插件
|
||||
我们可以使用丰富的第三方插件扩展webpack的功能
|
||||
#### html-webpack-plugin
|
||||
这是一个html文件的自动生成插件
|
||||
在打包当中 , 如果在文件命名当中加入了hash值 , 那么每次打包产生的文件名都会不同
|
||||
如果要每次都去复制文件名 , 然后手动修改html文件就太过繁琐了 , 而且也容易出错
|
||||
这个插件的作用就是自动完成这件事
|
||||
首先是安装
|
||||
```bash
|
||||
npm install html-webpack-plugin --save-dev
|
||||
```
|
||||
简单应用一下
|
||||
在webpack.config.js当中
|
||||
```javascript
|
||||
var HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
|
||||
module.exports = {
|
||||
//(其他配置项)...
|
||||
plugins : [
|
||||
new HtmlWebpackPlugin()
|
||||
]
|
||||
};
|
||||
```
|
||||
这种情况下使用的是插件的默认配置项 , 会在目标文件目录下生成一个index.html文件
|
||||
这个文件中自动引入了打包产生的若干js文件
|
||||
|
||||
但是在实际的应用当中 , 这个html文件通常需要复杂得多 , 我们需要指定一个预定义的模板
|
||||
```javascript
|
||||
//....
|
||||
new HtmlWebpackPlugin({
|
||||
filename : "assert/index.html" //文件输出的路径
|
||||
template : "template.html"
|
||||
})
|
||||
```
|
||||
其他常用参数
|
||||
+ inject : 可以取值 true | "body" | "head" | false , 代表js是否被引入到页面中 , 以及放在body底部还是在head当中
|
||||
+ title : 页面的标题
|
||||
+ favicon : 页面的图标文件
|
||||
+ chunks : 需要引入的模块名称 , 使用数组形式 , 比如["entity1", "entity2"]
|
||||
+ excludeChunks : 需要排除掉的模块名称 , 与chunks的格式一样 , 使用数组形式
|
||||
+ minify : 是否对生成的html文件内容进行压缩 , 包含许多子选项 , 可以参考[官方文档](https://github.com/kangax/html-minifier#options-quick-reference)
|
||||
|
||||
|
||||
##### 模板语法
|
||||
html-webpack-plugin使用了ejs的模板语法
|
||||
也就是在模板当中使用`<%= %>`可以引用变量
|
||||
例如在配置参数中自定义的属性
|
||||
```javascript
|
||||
new HtmlWebpackPlugin({
|
||||
title : "My App",
|
||||
filename : "assert/index.html",
|
||||
template : "test.html",
|
||||
inject : "head",
|
||||
now : new Date()
|
||||
})
|
||||
```
|
||||
在模板当中可以以如下方式使用
|
||||
```
|
||||
<p><%=htmlWebpackPlugin.options.now %></p>
|
||||
```
|
||||
BIN
source/images/前端杂烩/webpack/base64_output.png
Normal file
BIN
source/images/前端杂烩/webpack/base64_output.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
source/images/前端杂烩/webpack/build_result.png
Normal file
BIN
source/images/前端杂烩/webpack/build_result.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
source/images/前端杂烩/webpack/css_output.png
Normal file
BIN
source/images/前端杂烩/webpack/css_output.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
source/images/前端杂烩/webpack/image_output.png
Normal file
BIN
source/images/前端杂烩/webpack/image_output.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
source/images/前端杂烩/webpack/output.png
Normal file
BIN
source/images/前端杂烩/webpack/output.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
source/images/前端杂烩/webpack/webpack_entry.png
Normal file
BIN
source/images/前端杂烩/webpack/webpack_entry.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
source/images/前端杂烩/webpack/webpack_progress.png
Normal file
BIN
source/images/前端杂烩/webpack/webpack_progress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
source/images/前端杂烩/webpack/webpack_server.png
Normal file
BIN
source/images/前端杂烩/webpack/webpack_server.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
source/images/前端杂烩/webpack/目录结构.png
Normal file
BIN
source/images/前端杂烩/webpack/目录结构.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
source/images/前端杂烩/webpack/示意图.png
Normal file
BIN
source/images/前端杂烩/webpack/示意图.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 453 KiB |
Loading…
x
Reference in New Issue
Block a user