六、webpack中的加载器
通过loader打包js模块
在实际过程中,webpack默认只打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名的webpack默认处理不了,需要调用loader加载器才可以正常处理打包,否则会报错。
1、打包处理CSS文件
1)运行npm i style-loader css-loader -D命令
2)在webpack.config.js的module -> rules数组中,添加loader规则如下:
// An highlighted block
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']} // 顺序固定,从后往前调
]
}
其中test表示匹配的文件类型,use表示对应要调用的loader
2、打包处理less\sass文件
1)运行npm i less-loader less -D命令
2)运行npm i sass-loader node-sass -D命令
3)
module: {
rules: [
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
{test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
]
}
3、配置postcss自动添加css的兼容前缀
1)运行npm i postcss-loader autoprefixer -D
2) 在项目根目录的postcss的配置文件postcss.config.js
module.exports = {
plugin: [autoprefixer] // 挂在插件
}
3)在webpack.config.js的module -> rules数组中,修改css的loader规则如下:
module: {
{test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']},
}
4、打包处理样式表中的图片和字体文件
1)运行npm i url-loader file-loader -D
2) 在webpack.config.js的module -> rules数组中
module: {
{test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: 'url-loader?limit=16940'}, // 传参 图片大小 单位字节, 只有小于,才会被转为base64图片
}
5、打包处理js文件中的高级语法
1)安装babel转换器相关的包
npm i babel-loader @babel/core @babel/runtime -D
2)安装babel语法插件相关的包
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3)创建babel配置文件babel.config.js并初始化基本配置
module.export = {
presets: ['@babel/preset-env'],
plugin: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}
4)在webpack.config.js的module -> rules 数组中
module: {
{test: /\.js$/,
use: 'babel-loader', exclude: '/node_modules'}, // exclude排除,不需要处理这种文件
}
6、webpack中配置vue组件的加载器
1)运行npm i vue-loader vue-template-compiler -D
2)在webpack.config.js配置文件中
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.export = {
rules: [
{test: /\.vue$/, loader: 'vue-loader'}
],
plugin: [
new VueLoaderPlugin ()
]
}
7、在webpack项目中使用vue
1)运行npm i vue -s
2)在src -> index.js 入口,==import Vue form ‘vue’==导入到Vue构造函数
3)创建Vue的实例对象,并指定要控制的el区域
4)通过render 函数渲染App跟组件
// 导入Vue构造函数
import App form './components/App.vue'
const vm = new Vue({
el: '#app',
render: h => h(App) // 通过render函数,吧指定的组件渲染到el区域中
})
8、webpack打包发布
1)在package.json 文件中配置webpack打包命令
2)该命令默认加载项目根目录中的webpack.config.js配置文件
"scripts": {
// 用于打包的命令
"build": "webpack -p",
"dev": "webpack-dev-server --open"
}