前端-----(scss和webpack篇)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

变量

变量的声明是
$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 打包后的体积。