loader的安装和配置

loader的安装和配置

1、打包处理css文件

终端运行npm install style-loader css-loader -D安装处理css的loader
在webpack.config.js文件中module.exports下配置

module:{
        rules:[
            {test:/\.css$/,use：['style-loader','css-loader']}
        ]
    },
 //test表示要打包的文件类型，use表示要调用loader
 //use数组中的loder的顺序是固定的，从后往前调用

配置成功，在src目录下创建css文件夹添加1.css文件，在js下的index.js文件头部添加import '../css/1.css'，即可打包css文件。

2、打包处理less文件

运行npm install less-loader less -D 命令，在webpack.config.js的rules中添加{test:/\.less$/, user:['style-loader','css-loader','less-loader']}

3、打包处理scss文件

运行npm install sass-loader node-sass -D命令，在webpack.config.js的rules中添加{test:/\.scss$/, user:['style-loader','css-loader','sass-loader']}

4、配置post CSS自动添加css的兼容前缀

运行npm install postcss-loader autoprefixer -D命令，在项目根目录创建postcss.config.js文件，并配置。

const autoprefixer=require('autoprefixer')//导入自动添加前缀的插件
module.exports={
    plugins:[autoprefixer],//挂载插件,
}

在webpack.config.js文案中的module rules数组中，将css对应条目更改为{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}

5、打包处理JS文件中的高级语法

安装babel转换器相关的包npm install babel-loader @babel/core @babel/runtime -D
安装babel语法插件相关的包npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在项目根目录中创建babel配置文件babel.config.js

module.exports={
	presets:['@babel/preset-env'],
	plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

在webpack.config.js文件中rule数组中添加规则{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

6、打包样式表中的图片和字体文件

运行npm install url-loader file-loader -D，在webpack.config.js的rules数组中添加规则{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woof|woof2$/, use:'url-loader?limit=16940'},

7、配置vue组件加载器

运行npm install vue-loader vue-template-compiler -D，在webpack.config.js中添加vue-loader配置项

const VueLoaderPlugin=require('vue-loader/lib/plugin')
module.exports={
    plugins:[
        htmlPlugin,
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
        //...其他规则
        {test:/\.vue$/,use:'vue-loader'}