webpack4入门笔记—

什么是loader

类似gulp中的taskes，即任务

webpack除了主营JS，还可以对指定的文件进行统一处理，比如把typescript转换为js，js内导入css等

这些任务都需要安装对应的依赖，且在module.rules配置项中配置（其他方式忽略）

{module: {rules: [//任务配置{test:regex,//正则,匹配文件规则exclude:regex,//正则,不包含的文件夹use:[//使用到的loaders及其配置{//某个loaderloader:'xx',options:{}}]}]}
}
复制代码

以下列举一些常常做的任务

css打包

html中不需要引入css文件，通过js间接的获取样式，这样整个html只需要引入一个js文件即可。

使用 css-loader 可以在js中直接导入css文件，并在打包时把样式也打包在output文件中
```
//比如，其中indexcss名称任意
import indexcss from './index.css';
复制代码
```
在js中使用方式：className直接写名称即可（在引入的文件类）

如何解决引入多个css重名问题？
使用 style-loader 把js中的样式输入到html中的 <style> 标签内

1 . 安装依赖包

cnpm install style-loader css-loader --save-dev
复制代码

2 . 配置

module: {rules: [{test: /\.css$/,use: [{ loader: "style-loader" },{ loader: "css-loader" }]//简写//use:["style-loader","css-loader"]}]
}
复制代码

注：options不存在时可简写成数组，注意loader引入的顺序

贴测试配置图：

postcss

postcss 是对css的扩展，允许使用下一代 CSS 语法，编译后转换成正常的css且会自动加上前缀

配和 autoprefixer 使用（why?）

1 . 安装

cnpm i  postcss-cssnext autoprefixer --save-dev
复制代码

2 . 配置

rules: [{// 使用 PostCSS 处理 CSS 文件test: /\.css/,use: ['style-loader', 'css-loader', 'postcss-loader'],},
]
复制代码

注意：postcss-loader 应该先执行，再执行 css-loader (倒序)

3 . 创建配置文件 postcss.config.js

module.exports = {plugins: {'autoprefixer': {browsers: 'last 5 version' // 代表意思为每个主流浏览器的最后5个版本}}
}
复制代码

less

处理less文件，一般和上面的css-loader style-loader一起使用

1 . 安装依赖包

cnpm install less-loader less --save-dev
复制代码

2 . 配置

在上面的use加入

{loader: "less-loader"}
复制代码

注：注意顺序，链式调用，放在最后

图片移动和打包

css既然都放在js中了，为什么图片不可以呢？

file-loader

css打包会导致个问题：写background图片路径可能是按照css文件相对路径计算的，那么打包进js后值未改变，会导致路径错误。（还有什么地方用到？）

file-loader 解决了这个问题：它把都图片移动到指定的位置，并修改url

另外，也允许使用import导入图片，被计算出正确的路径，后续使用这个路径作为图片的正确路径
```
import banner1 from "../../images/banner1.jpg";
<img src={banner1} />
复制代码
```
url-loader

它把一部分图片转换为base64编码打包进js中，实际上是对file-loader的上层封装（但不依赖，内置file-loader）

注：虽然不依赖，但是图片import还需要它，url-loader只转编码

1 . 安装依赖包

cnpm install url-loader file-loader --save-dev
复制代码

2 . 配置

{test: /\.(png|jpg|gif)$/,use: [{ loader: "url-loader",options:{limit: 8192, //单位byte，小于8KB的图片都会被编码(base64)放打包在js中name: 'images/[name].[ext]' //图片复制到指定位置}}]
}
复制代码

贴测试配置图：

img1.jpg（小于8kb）和img2.jpg（大）

打包后img1被打包进了js里，img2由于超过指定大小被复制到了指定位置且 background中的url路径被更改

ES6转ES5 ES3

babel-loader 它把ES6转换成低版本的js代码以在低版本浏览器中运行（大部分浏览器不能完全支持es6）

1 . 安装依赖包

cnpm install babel-loader babel-core babel-preset-env --save-dev
复制代码

2 . 配置

{test: /\.js$/,exclude: /(node_modules|bower_components)/,//只是节约打包时间，这些文件夹内的js不会babal处理use: {loader: 'babel-loader',options: {presets: ['env']}}
}
复制代码

支持React

1 . 额外依赖包

cnpm install babel-preset-react --save-dev
复制代码

附react安装

cnpm install react react-dom --save
复制代码

额外配置

preset中加入react

presets: ['env','react']
复制代码