Appearance
常见资源解析
资源解析 es6
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env
1
使用 babel-loader
babel 的配置文件是：.babel
module: {
rules: [
{
test: /.txt$/, // test指向匹配规则
use: 'raw-loader' // use指定使用的loader名称
},
{
test: /.js$/,
use: 'babel-loader'
}
]
},
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
资源解析：增加 es6 的 babel preset 配置
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/proposal-class-properties"
]
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
资源解析 css
css-loader 用于加载。css 文件，并且切换成 commonjs 对象
style-loader 将样式通过 <style> 标签插入到 head 中
npm install style-loader css-loader -D
1
module:{ //模块
rules:[ // 规则 css-loader接续 @import这种语法
// stype-loader 他是把css插入到head的标签中
// loader的特点 希望单一
// loader的用法字符串只用一个loader
// 多个loader需要【】
// loader的顺序 默认是从右向左执行 从下倒上
// loader还可以写成对象的方式
{
test:/.css$/,
use:[{
loader:'style-loader',
options:{
insertAt:'top',// 插入到顶部
}
},
'css-loader'
]
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
解析 less
yarn add less-loader -D
{
// 可以处理less文件
test: /.less$/,
use: [{
loader: 'style-loader',
options: {
insertAt: 'top', // 插入到顶部
}
},
'css-loader', // @import 解析路径
'less-loader' // 把less->css
]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
转化为 link
因为都转化为 style 样式的话，css 多的话，会很乱，所以会转化为 link 标签
yarn add mini-css-extract-plugin -D
let MiniCssExtractPlugin = require['mini-css-extract-plugin']
1
plugins:[ //数组放着所有的webpack插件
new MiniCssExtractPlugin({
filename: "main.css", //模板名称
})
],
1
2
3
4
5
2
3
4
5
module:{ //模块
rules:
{
// 可以处理less文件
test:/.css$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
// 可以处理less文件
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // @import 解析路径
'less-loader' // 把less->css
]
},
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
css 浏览器前缀
yarn add postcss-loader autoprefixer -D
新建与 webpack.config.js 同级的 postcss.config.js 文件
module.exports = {
plugins:[
require("autoprefixer")
]
}
1
2
3
4
5
2
3
4
5
let MiniCssExtractPlugin = require['mini-css-extract-plugin']
module:{ //模块
rules:[
{
// 可以处理less文件
test:/.css$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
// 可以处理less文件
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // @import 解析路径
'postcss-loader'
'less-loader',
]
},
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
css 打包
yarn add optimize-css-assets-webpack-plugin -D
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],//优化项目
}
1
2
3
4
5
6
7
2
3
4
5
6
7
资源解析图片
file-loader 用户处理文件
module: {
rules: [
{
test: /.(png|svg|jpg|gif)$/, // test指向匹配规则
use: [{
loader:'url-loader',
options:{
limit:10240 //10k的大小，就直接做一个base64
}
}]
}
]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
资源解析 vue
vue-loader
vue-template-compiler
vue
cnpm i vue-loader vue-template-compiler vue
1
配置文件
js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module: {
rules: [
{
test: /.vue$/,
use: 'vue-loader'
},
]
},
plugins: [
new VueLoaderPlugin(),
]
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
引入模块
index.js 文件中
js
import Vue from 'vue';
import App from './app.vue';
const root = document.createElement('div');
document.body.appendChild(root);
new Vue({
render: (h) => h(App)
}).$mount(root);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
创建 vue
新建一个 app.vue
vue
<template>
<div id="test">
{{ msg }}
</div>
</template>
<script>
export default {
data() {
return {
msg: "Welcome",
};
},
};
</script>
<style scoped>
#test {
color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20