webpack深入了解——loaders

1. loaders

说了这么多，webpack的五大功能中的loaders还没有提到啊，老铁😎，那么，接下来我们就来看看loaders了。首先，我们要知道loaders是干什么的，loaders主要就是用来转化我们浏览器不认识的代码的，比如less、scss、ts，我们webpack.config.js文件中还有一个属性就是来处理这些问题的，它就是module，注意，没有s，没有s，没有s，🤐

1. 我们以css文件，来举例，webpack默认是不认识css文件的，我们这里就需要安装两个插件，style-loader、css-loader

cnpm i style-loader css-loader -D

2. 然后，我们在src目录下的css文件夹中新建一个main.css，内容如下：

body {
    background-color: darkcyan;
    color: #fff;
}

3. 接着，我们需要把css文件引入到页面，这时，我们就需要找到入口文件，通过import + 路径，这种方式来引入css文件了，看一下main.js文件中的内容：

import './css/main.css'
var oDiv = document.querySelector('#demo');
oDiv.innerHTML = 'hello world';

4. 上面这几步准备好之后，我们需要在webpack.config.js文件中进行配置了，内容如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    entry: {
        main: './src/main.js',
        main2: './src/main2.js'
    },
    output: {//出口配置
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']
                //loader: ['style-loader', 'css-loader']  另外的两种写法
                // use:[
                //     {loader: 'style-loader'},
                //     {loader: 'css-loader'}
                // ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            hash: true,
            title: 'hello world',
            template: './src/index.html'
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: 'localhost',
        port: 8090,
        open: true,
        hot: true
    } 
}

注意：这里的属性名都是定死的，不能修改。test的值是一个正则用于匹配，use中的值是我们通过那个插件来转化

5. 命令行运行 npm run dev，好激动😘，浏览器显示如下：

image.png

2. 压缩

项目上线的话，为了优化肯定是需要压缩的，webpack也提供了压缩的功能，4.0以后的版本可以通过改变mode属性，来进行压缩😘，当然，也可以通过一个插件来进行压缩，这个插件就是uglifyjs-webpack-plugin，注意，还是没有s，没有s，没有s，😎。

• ① 通过mode属性来进行压缩，直接将mode的属性改为production即可

build: 'webpack --mode production'

• ② 通过uglifyjs-webpack-plugin，来进行压缩

1. 首先，安装这个插件

cnpm i uglifyjs-webpack-plugin

2. 然后，在webpack.config.js中引入这个模块

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const Uglify = require('uglifyjs-webpack-plugin'); // 引入模块
module.exports = {
    entry: {
        main: './src/main.js',
        main2: './src/main2.js'
    },
    output: {//出口配置
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new Uglify(), // 实例化这个模块
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            hash: true,
            title: 'hello world',
            template: './src/index.html'
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: 'localhost',
        port: 8090,
        open: true,
        hot: true
    } 
}

命令行运行，npm run build，结果也是压缩的