webpack2学习随笔

Posted 2020-09-20 莲步子

 

 

 

 

 

 

 

1 webpack 概述

 

　　Webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源，包括css、image、font file、template等。个人认为它的优点就是易用，而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求。这里就尽量详细的来介绍下一些基本功能的使用。

主要功能

1. 1. 把相关的依赖代码按需分割成不同的代码块
   2. 加载时间短
   3. 每个静态资源都可以成为一个模块
   4. 能够集成第三方库作为模块
   5. 可以自定义模块的每一部分
   6. 适合大项目

 

2 webpack 安装 

　　 先安装node

1. 进入根目录 npm install  --- 安装node
2. 初始化node  npm init
3. 安装webpack  npm install webpack --save-dev/ npm install webpack -g  （局安装）
4. 执行webpack命令   webpack

3 配置文件webpack.config.js

module.exorts={}

1) entry

 　　//入口文件配置 
　　当入口文件为单个时 ，参数为字符串，

　　　　

 

　　　当入口文件为多个时，参数为对象/数组 其中key 为name

　　　　

  2）output 

生成文件配置 

 

参数

path:生成路径，webpack2要求绝对路径，所以先引入path文件

filename: 生成的文件名字 可以动态创建也可以写死，稍后讲解

publicPath:上线时 文件在线地址

动态创建文件名：

[id]--生成chunk文件的id

[name]--chunk的name  例如文件入口的key值

[hash]---打包时生成的hash码

[chunkhash]--- 每个chunk生成的hash码，当文件改变时这个也跟随改变，文件内容改变时 文件名字也跟随改变

所以文件结构可以用以上三种任意拼接

3)插件的使用plugins

与module 同级，plugins:[]

一, html-webpack-plugin

 对html文件的操作 

1)npm install html-webpack-plugin --save-dev

2)基础用法

 

 

参数解析

template 模板文件

filename:生成的html文件名字可以使用[name]-[hash]-[chunkhash]命名

inject：将生成的js文件插入到html文件的哪各部分 true | \'head\' | \'body\' | false

excludeChunks：[]排除那些chunk

chunks:[]包含哪些chunk

title：html title

或者把文件内容读写到html文件模板里

 

更多参数参考https://github.com/jantimon/html-webpack-plugin

二 ExtractTextPlugin

生成单独的css 文件

 

 

 

 

 

 更多参考

https://webpack.js.org/plugins/extract-text-webpack-plugin/#components/sidebar/sidebar.jsx

更多插件后续更新中....

4)loader

基本用法

1）安装loader 

eg:

2）引入loader

 

3)webpack.config.js 配置

1.加载单个loader

2 加载多个laoder

主意：loader的加载顺序是从右往左的优先级

3 对每个laoder进行单独配置

4 参数详解

 

bable-loader

1

 

2页面添加loader

 

webpack1.0版本

 

html-loader

打包html文件，同图片解析loader一同使用 file-loader 或url-loader

 

配置里添加loader

注意：minimize属性对html 文件进行压缩

压缩的参数有

例如

 

http://www.css88.com/doc/webpack2/loaders/html-loader/

 

file-loader 

打包图片为图片文件

 

url-loader

打包图片 参数设置

 压缩图片 image-webpack-loader

或者可以这么写

 

 

当limit>原图片实际大小时 打包后将以二进制流展示,<原尺寸会以源文件展示

css-loader

可以通过option配置更多参数例如

 

css压缩

ExtractTextPlugin

css 生成单独的文件

 

 postcss-loader  

处理css 浏览器前缀

研究了很久 webpack1和webpack2 用大不一样

 

 https://webpack.js.org/loaders/postcss-loader/#components/sidebar/sidebar.jsx