在实际开发中,webpack值打包以.js结尾的文件,其他的文件webpack默认不处理,webpack处理其他的文件就使用Loader加载器才可以正常的打包了,否则就会报错了
loader加载器包含：
1).less-loader
2).sass-loader
3).url-loader:打包处理css中与url路径有关的文件
4).babel-loader:处理高级js语法的加载器
5).postcss-loader
6).css-loader,style-loader
1.打包处理CSS文件
##打包处理CSS文件
1.安装包
npm install style-loader css-loader -D
2.配置规则
在webpack.config.js中的export中添加数组rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
}
]
}
}
*注意:use数组中的loader数组的顺序是固定的,调用loader的顺序是从后往前调用的*
2.打包处理less文件
##打包处理less文件
1.安装包
npm install less-loader less -D
2.配置规则
在webpack.config.js中的export中添加数组rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.less$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader','less-loader']
}
]
}
}
3.在index.js中导入即可,然后启动项目即可
3.打包处理scss文件
##打包处理less文件
1.安装包
npm install sass-loader node-sass -D
2.配置规则
在webpack.config.js中的export中添加数组rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.less$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader','less-loader','sass-loader']
}
]
}
}
3.在index.js中导入即可,然后启动项目即可
4.安装post-css自动添加css的兼容性前缀
#1).安装包
npm install postcss-loader autoprefixer -D
2).在项目根目录创建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
plugins:[ autoprefixer ]
}
3).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader','postcss-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
5.打包样式表中的图片以及字体文件
#① 运行 npm i url-loader file-loader -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module: {
rules: [
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: 'url-loader?limit=16940'
}
]
}
其中 ? 之后的是 loader 的参数项。
limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片
6…打包js文件中的高级语法
#A.安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D
B.安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在项目根目录创建并配置babel.config.js文件
module.exports = {
presets:["@babel/preset-env"],
plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
D.配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
//limit用来设置字节数，只有小于limit值的图片，才会转换
//为base64图片
use:"url-loader?limit=16940"
},{
test:/\.js$/,
use:"babel-loader",
//exclude为排除项，意思是不要处理node_modules中的js文件
exclude:/node_modules/
}
]
}
}
7.配置vue加载器
# 1.安装vue加载器
npm install vue-loader vue-template-compiler -D
2.在webpack.config.js中修改添加以下内容
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
......
plugins:[ htmlPlugin, vuePlugin ],
module : {
rules:[
...//其他规则
{
test:/\.vue$/,
loader:"vue-loader",
}
]
}
}
3.在index,js中导入"import App from './src/component/App.vue'"
4.在终端运行npm run dev
8.在webpack中使用vue
#1.安装vue
npm install vue -S
2.在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数
3.创建 vue 的实例对象，并指定要控制的 el 区域
4.通过 render 函数渲染 App 根组件
代码如下:
// 1. 导入 Vue 构造函数
import Vue from 'vue'
// 2. 导入 App 根组件
import App from './components/App.vue'
const vm = new Vue({
// 3. 指定 vm 实例要控制的页面区域
el: '#app',
// 4. 通过 render 函数，把指定的组件渲染到 el 区域中
render: h => h(App)
})
8. webpack 打包发布
#1.在package.文件中
在"scripts": {
......
"build":"webpack -p"
}
2.然后删除dist目录下的东西
3.执行命令npm run build 生成新的dist目录(dist目录下面的index.html 就可以直接访问首页)