提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
变量
变量的声明是
$primary-color
mixin
mixin+include
extend
import
颜色函数
@for @while @each @function
webpack配置
const path = require(‘path’)
const {VueLoaderPlugin} = require(‘vue-loader’);
var HtmlWebpackPlugin = require(‘html-webpack-plugin’)
module.exports ={
entry:“./src/main.js”,//入口
output:{
path:path.resolve(__dirname+“/dist”),//dirname是当前文件夹
filename:“bundle.js”
},//输出文件
module:{
rules:[{test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 20: …e:"vue-loader" }̲, {test… / ,use:[‘style-loader’,‘css-loader’,‘scss-loader’]},
{test:/.m?jsKaTeX parse error: Expected 'EOF', got '}' at position 135: … } }}̲, {test…/,type:“asset/resource”}
]
},
//loader加载
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:‘./index.html’,
filename:‘index.html’,
title:“测试”
})
]
//配置插件
}
入口文件
module.exports ={
entry:"./src/main.js",//入口
}
输出路径
1.filename:打包的js的名字
2.path:打包路径
output:{
filename:"dist.js",
path:path.resolve(__dirname,"dist")
}
loader的配置(modules)
1.rules
2.test
// 多个loader用use
use: ['style-loader', 'css-loader']
},
{
test: '/\.js$/',
// 单个loader用loader
loader: 'eslint-loader'
3.use
4.includes 只匹配在这个目录下的转译
5.excludes 在这个目录下的都不转译
modules:{
rules:[{
test:/\.css$/i,
use:[]
}]
}
一、loader 在使用这些loader前要将其先进行下载安装
更多详情见官网:loaders | webpack 中文网
//在webpack.config.js中进行配置
module.exports = {
module: {
rules: [
{
test: /.css/,
use: [“xxx-loader”] //将要使用的loader写在这
}
]
}
}
1、less-loader
用于将less编译成css
2、css-loader
用于将css以CommonJS语法打包到JS中;
必须配合style-loader共同使用,只安装css-loader样式不会生效。
3、style-loader
用于动态创建style标签,将css引入其中
4、sass-loader
css预处理器
5、postcss-loader
用于补充css样式各种浏览器内核前缀,用于处理css兼容问题,需要和postcss、postcss-preset-env配合使用。
备注1:使用的时机为:[“css-loader”,“postcss-loader”,“less-loader”]。
备注2:需要在package.json中配置browserslist属性指定具体的兼容规则
备注3:browserslist是一个单独的库,被广泛用在各种涉及浏览器/移动端的兼容性支持工具中
6、babel-loader
将Es6+ 语法转换为Es5语法;
babel-loader 这是使babel和webpack协同工作的模块
@bable/core 这是babel编译器核心模块
@babel/preset-env 这是babel官方推荐的预置器,可根据用户的环境自动添加所需的插件和补丁来编译Es6代码;
备注1:直接使用只能处理简单的语法,Promise等无法处理。
备注2:借助polyfill完成高级es6语法的转换,缺点:所有都转换,无法按需转换,生成的js体积大。
备注3:使用core-js配合polyfill完成按需转换。
7、ts-loader
用于配置项目typescript
8、html-loader
想引入一个html页面代码片段赋值给DOM元素内容使用,这时就用到html-loader
9、file-loader
用于处理文件类型资源,如jpg,png等图片。返回值为publicPath为准。
10、url-loader
url-loader也是处理图片类型资源,只不过它与file-loader有一点不同,url-loader可以设置一个根据图片大小进行不同的操作,如果该图片大小大于指定的大小,则将图片进行打包资源,否则将图片转换为base64字符串合并到js文件里
11、vue-loader
用于编译.vue文件。
vue-loader 用于识别.vue文件
vue 不用多说,识别支持vue语法
vue-template-compiler 语法模板渲染引擎 {{}} template、 script、 style
12、eslint-loader
用于检查代码是否符合规范,是否存在语法错误
二、Plugin 插件
更加详细可见官网: Plugins | webpack 中文网
1、html-webpack-plugin
根据指定模板自动创建html文件,并且引入外部资源
2、mini-css-extract-plugin
将 CSS 提取为独立的文件的插件,对每个包含 css 的 js 文件都会创建一个 CSS 文件,支持按需加载 css 和 sourceMap。只能用在 webpack4 中。
3、optimize-css-assets-webpack-plugin
用于压缩css,减小 css 打包后的体积。