webpack加载器

webpack默认只能打包js文件，对于非js文件只能调用loader加载器才能打包，否则就会出错

loader加载器：

less-loader：打包处理.less相关 sassloader：打包处理.sass相关url-loader：打包处理css中与url路径相关的文件

打包.css文件

安装加载器 npm i style-loader css-loader -D

2.修改webpack.config.js中的module->rules数组

module.exports = { mode: "development", module: { rules: [ {test: /\.css$/, use: ['style-loader', 'css-loader']} ] } }

其中，test表示匹配文件类型， use表示调用加载器

less文件

less加载器需要css加载器，所以使用less加载器之前需要安装css 加载器

npm i less-loader less -D

修改

module.exports = { mode: "development", module: { rules: [ {test: /\.css$/, use: ['style-loader', 'css-loader']}, {test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']} ] } }

scss文件

npm i sass-loader node-sass -D修改rules module.exports = { mode: "development", module: { rules: [ {test: /\.css$/, use: ['style-loader', 'css-loader']}, {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']} ] } }

同样sass也需要css加载器 注意： 文件名后主是是 scss，加载器是sass-loader

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

npm i url-loader file-loader -Dwebpack.config.js添加： { test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit-16940' }

其中，？之后的是loader的参数项 limit用来指定图片的大小，单位是字节，只有小于limit大小的，才会被转为 base64图片

webpack高级语法

babel转换器相关的包：

npm i babel-loader @babel/core @babel/runtime -D

babel语法插件：

npm i @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 的module->rules数组中，添加loader:

{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}

exclude为排除项目，表示babel-loader不需要处理node_modules中的js文件

配置Vue加载器

npm i vue-loader vue-template-compiler -D

修改rules:

{test: /\.vue$/, loader: 'vue-loader'}