webpack中的加载器使用

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认是处理不了的，这时候需要调用loader加载器才可以正常打包，否则会报错。
1、打包处理css文件
（1）运行npm i style-loader css-loader -D命令，安装处理css文件的loader。
（2）在webpack.config.js配置文件的添加loader规则如下：

 module: {
        rules: [
            {test:/\.css$/,use:['style-loader','css-loader']}
            //其中，test表示匹配的文件类型，use表示对应要调用的loader。
        ]
    }

注意：use数组中指定的loader顺序是固定的；多个loader的调用顺序是：从后往前调用。
2、打包处理less文件
（1）运行npm i less-loader less -D命令，安装处理less文件的loader。
（2）在webpack.config.js配置文件的添加loader规则如下：

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

3、打包处理scss文件
（1）运行npm i sass-loader node-sass -D命令，安装处理scss文件的loader。
（2）在webpack.config.js配置文件的添加loader规则如下：

module: {
        rules: [
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
        ]
    }

4、配置postcss自动添加css的兼容前缀
（1）运行npm i postcss-loader autoprefixer -D命令。
（2）在项目根目录下创建postcss配置文件postcss.config.js，并初始化如下配置：

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

（3）在webpack.config.js的rules数组中，修改css的loader规则如下：

module: {
        rules: [
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
        ]
    }

5、打包样式表中的图片和字体文件
（1）运行npm i url-loader file-loader -D命令。
（2）在webpack.config.js的rules数组中，添加loader规则如下：

module: {
        rules: [
            {test:/\.jpg|png|gif|webp$/,use:'url-loader?limit=56000'}
            //“？”之后的是loader的参数项，limit用来指定图片的大小，单位是字节（byte），只有小于limit大小的图片，才会被转为base64的图片。
        ]
    }

6、打包处理js文件中的高级语法
（1）安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D。
（2）安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D。
（3）在项目根目录下，创建babel的配置文件babel.config.js并初始化基本配置如下：

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

（4）在webpack.config.js的rules数组中，添加loader规则如下：

module: {
        rules: [
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
            //exclude为排除项，表示babel-loader不需要处理node_modules中的js文件。
        ]
    }

7、webpack配置vue组件的加载器
（1）运行npm i vue-loader vue-template-compiler -D命令。
（2）在webpack.config.js配置文件中，添加vue-loader的配置如下：

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

8、在webpack项目中使用vue
（1）运行npm i vue -S,安装vue。
（2）在src下的index.js入口文件中，通过import Vue from 'vue'来导入vue构造函数。
（3）创建vue的实例对象，并指定要控制的el区域。
（4）通过render函数渲染App根组件。

//1.导入vue构造函数
import Vue from 'vue';
//2.导入单文件组件
import App from './components/App.vue';
const vm = new Vue({
//3.指定vm实例要控制的页面区域
    el: '#app',
    //4.通过render函数，把指定的组件渲染到el区域中
    render: h => h(App)
})

9、webpack打包发布
在package.json文件中配置webpack打包命令，该命令默认加载项目根目录中的webpack.config.js配置文件。

"scripts": {
    "built": "webpack -p"
  }

10、关于上述提到的配置文件如下：
（1）webpack.config.js文件如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html'
})
module.exports = {
    //编译模式
    mode: 'development', //development/production
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins: [htmlPlugin,new VueLoaderPlugin()],
    module: {
        rules: [
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.jpg|png|gif|webp$/,use:'url-loader?limit=56000'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            {test:/\.vue$/,loader:'vue-loader'}
        ]
    }
}

（2）postcss.config.js文件如下：

const autoprefixer = require('autoprefixer');
module.exports = {
    plugins: [autoprefixer]
}

（3）babel.config.js文件如下：

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

（4）关于上述提到的依赖包如下：

"devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/runtime": "^7.9.2",
    "autoprefixer": "^9.7.6",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "node-sass": "^4.13.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.4",
    "url-loader": "^4.1.0",
    "vue-loader": "^15.9.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }