loader
详情:Webpack的一个核心概念
对于webpack本身来说,不具备这些转化的能力。给webpack扩展对应的loader就可以。
loader 的使用过程
- 通过npm安装需要的loader
//加载 CSS 文件并解析 import 的 CSS 文件,最终返回 CSS 代码
npm install --save-dev css-loader
// 负责将样式添加在DOM上
npm install --save-dev style-loader
//加载并编译 LESS 文件
npm install less less-loader --save-dev
// 用于管理JS中导入的资源或者CSS中引用的资源路径。
npm install --save-dev file-loader
//用于管理HTML,提取管理引用资源,如img中的src,还可以对html进行优化,如去除所有的注释压缩等。
npm install --save-dev html-loader
配置方式
loader 从右到左(或从下到上)地取值(evaluate)/执行(execute)。在下面的示例中,从 sass-loader 开始执行,然后继续执行 css-loader,最后以 style-loader 为结束。
- 在webpack.config.js的module关键字下进行配置。
//webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},{
test: /\.less$/i,
use: [{
loader: "style-loader", //style-loader最主要干的事情就是将JS中编译的CSS代码插入DOM之中,使之生效。
},{
loader: "css-loader", //css-loader很显然就是将CSS编译成JS认识的语法。
},{
loader: "less-loader",
}],
},
],
},
};
// 解析从右到左执行
图片的处理(图片文件夹)
//npm
npm init -y
npm install --save-dev webpack@4.44.1 webpack-cli@3.3.12
npm install --save-dev html-webpack-plugin@4.3.0
npm install --save-dev css-loader@4.1.1 style-loader@1.2.1
npm install --save-dev mini-css-extract-plugin@1.3.9
npm install --save-dev file-loader@6.0.0
// webpack.config.js
const path = require('path'); // 引入路径路径
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 打包html文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 打包css文件
let mode = 'development'; //设置当前的开发环境
// 配置打包入口文件
let entry = {
main: './src/index.js'
}
// 配置打包后的出口文件
let output = {
path:path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
}
// 配置插件
let plugins = [];
// 配置loader
let module_ = {
rules: []
};
// 实例化插件
let htmlPlugin = new HtmlWebpackPlugin({
template: path.resolve('./index.html'), // 根据路径找到打包的html路径
filename: 'index.html', // 指定打包之后的html文件名
chunks: ['main'] // 指定打包之后的加载的js文件
})
plugins.push(htmlPlugin);
// 使用插件 打包css 是创建css 文件
let cssPlugin = new MiniCssExtractPlugin({
filename: "css/[name].bundler.css", //设置打包之后的文件
// chunks: ['index']
})
plugins.push(cssPlugin);
// 配置css-loader
let cssLoader = {
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader,'css-loader']
}
module_.rules.push(cssLoader);
// 处理图片的loader
let fileLoader = {
test: /\.(png|jpe?g|gif)$/i,
use: [{
loader: 'file-loader',
options: {
name: 'img/[name][hash:8].[ext]', // 指定css文件名
publicPath: '../', // 指定css中的图片指定路径
esModule: true,//该配置项为图片打包后的默认路径,带default对象,默认为ture,在配置项里将此项改为false即可去掉多余的defalut对象
}
}],
};
module_.rules.push(fileLoader);
module.exports = {
mode,
entry,
output,
module: module_,
plugins,
}
// package.json 中的模块的下载
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"zy": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.1.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^1.3.9",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
// 与 file-loader 类似,但是如果文件大写小于一个设置的值,则会返回 data URL
npm install url-loader --save-dev
//将文件保存至输出文件夹中并返回(相对)URL
npm install file-loader --save-dev
// module 配置
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: [
{
loader: 'url-loader',
options: {
// 当加载图片,小于limit时,会将图片编译成base64字符串的形式
// 当加载图片,大于limit时,需要使用file-border模块加载
limit: 8192,
// 自定义的打包图片命名方式:image.a12312a.jpg
name: img[name].[hash:8].[ext]
},
{
loader: 'file-loader',
}
},
],
},
// 使用file-loader模块加载图片时候,是将本地图片加载打包带dist/路径中,所以在webpack.config.js/output中添加
publicPath: 'dist/'
//解析之后的图片名为由hash 值生成。
a374b61dcb6ff1bb985d8bbd06c8c74f.jpg
最后打包的图片的名字:img.name.hash(8)
file-loader处理js中引入的图片
// webpack中file-loader 和 ES6的import实现
// index.js
// 图片资源
import imgP from '../../assets/img/2.jpg'
// js中插入图片
const imgEl = document.createElement('img');
imgEl.src = imgP;
document.body.appendChild(imgEl);
html-withimg-loader处理xxx.html文件中引入的图片
//npm安装html-withimg-loader
npm install --save-dev html-withimg-loader@0.1.16
//修改webpack.config.js中loader
let imgLoader = {
test:/\.(html|htm)$/i,
use:'html-withimg-loader', // 解析 html中的图片资源
}
ES6 ->ES5
使用 babel 将ES6 转译为 低版本es
// 安装cpm 指令
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
//config 配置
module.exports = {
module: {
rules: [
{
test: /\.m?js$/, // 使用loader的时候,处理什么类型的文件
// 排除哪些文件
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader', //使用的loader名
options: {
presets: ['es2015'] //
}
}
}
]
}
}
问题:es6 中 内置对象 api 不能被编译,结合webpack解决这个问题??
1: 编写 es6代码
1.1 在 src/index.js ---> 写代码
2: 使用 bable 将es6语法转移为低版本es、
2.1 安装babel 工具 以及 依赖项目 npm install --save-dev babel-loader@8.1.0 @babel/core@7.11.0 @babel/preset-env@7.11.0
2.2 编写babel 配置文件 .babelrc
2.3 运行webpack =====> 打包后 es6 api 没有被编译 (注意:webpack 与 babel 是两个独立的工具)
3: 将转移后的代码 结合webpack 进行打包. babel 工具 与 webpack 如何结合使用: babel-loader
3.1 安装 babel-loader// npm install --save-dev babel-loader@8.1.0
3.2 使用 babel-loader
3.3 index.js 引入 core-js
core-js 作用: 编译es6新增 API
npm install --save-dev core-js@3.6.5
再入口文件中引入 import "core-js/stable";
3.4 运行webpack npm run build
3.5 查看打包后main.js文件;==>api 被编译了 l
loader: 因为webpack默认值支持 js json文件。
loader 可以让webpack处理其他文件 babel-loader babel 与webpack 的结合编译es6语法
// core-js
> 编译一个es6新增的 API