3.2 webpack---loader

一、介绍

1. 为什么要用？

• js代码可以通过webpack直接进行打包，但是除了js代码，前端页面还会包含css,less，vue等其他文件格式需要处理；
• 因此需要对webpack进行扩展，也就是loader；

2. 如何用？

• 通过npm安装必要的loader； 官方loader
• 在webpack.config.js中module下进行相关配置；
• 将css，less，vue文件引入；

二、CSS文件

1. css文件

body{
    background-color: blue;
}

2. 在js中引入

/*main.js:  1. 作为程序的入口，打包时候就是打包该文件*/
let info = 'java工程师';

import {name,address} from './js/first.js';

console.log(info);
console.log(name);
console.log(address)

// 依赖css文件
require('./css/sz.css')

3. 安装对应的loader

# 开发时依赖
npm install style-loader --save-dev
npm install css-loader --save-dev

4. 在webpack.config.js中配置

const path = require(‘path’);

/*入口及出口的绝对路径，绝对路径是通过npm来获取的*/
module.exports = {
    entry: './src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
    },

    /*配置对应的需要检测的文件及loader*/
    module: {
        rules: [
            {
                test: /\.css$/,
                // loader是从右往左加载
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

三、LESS文件

• 一种css的预处理文件，也是做格式的，不过是另外一种语法，最终也会被编译成css

四、 图片文件

• 图片文件类似：项目下面的src的img包
• json资源，文件资源等

五、 babel

• 最终打包的js文件，是ES6的，对于某些浏览器可能存在无法解析问题，因此将ES6转换为ES5

npm install -D babel-loader @babel/core @babel/preset-env webpack

六、插件

1. HtmlWebpackPlugin

• 负责将项目下面的index.html也会通过自定义的方式打包到dist文件夹下；

2. UglifyjsWebpackPlugin

• 负责将打包完后的js文件进行丑化，从而缩小一定的js文件；