第三节:Webpack打包样式文件

前言:

上一节学习了webpack最基本的打包,将浏览器不识别的模块化打包为浏览器识别的模块化

但是也有一个问题,就是webpack不能直接打包样式文件,

因此我们需要使用loader来辅助webpack打包,

如果要使用loader,咱们就不要在像之前一样在命令中指定入口,入口文件了,

因为把所有需要的内容写在命令行就会非常不好, 也不利于代码调试和维护

因此我们需要配置webpack打包文件,文件的名字固定为webpack.config.js

1. webpack 配置文件

1.1 配置文件的理解

1. webpack 配置文件名称固定为webpack.config.js,
2. 处理好配置文件以后, 在打包时只需要在命令行输入webpack命令就可以打包了,
3. 因为webpack在打包时会自动查找到webpack.config.js进行解析

webpack.config.js的作用就是告诉webpack接下来要做哪些工作

1.2 配置文件选项

注意: 所有的构建工具都是基于node环境的, 因此,在webpack.config.js中,默认使用commonjs模块化规范

配置文件代码:

// webpack.config.js

const {resolve } = require("path")

// 导出webpack配置
module.exports = {
    // webpack 打包的入口文件(起点)
    entry:"./src/index.js",

    // webpack 打包的出口配置(输出)
    output:{
        filename:"bundle.js",              // 出口文件
        path:resolve(__dirname,"build")    // 出口文件所在的目录
    },

    // loader的配置 
    module:{
        // rules 规则, 详细的loader配置, 
        // 不同的loader 处理不同的文件
        rules:[

        ]
    },

    // plugins 配置
    plugins:[
        // 详细的plugins 插件的配置
    ],

    // webpack打包模式,是开发模式还是生产模式, 只能有一个
    mode:"development",
    // mode:"production"
}

2. 配置打包CSS样式文件的loader

2.1 打包样式loader的说明

说明:

1. 打包css是需要通过css-loader将样式文件处理为webpack识别的模块
2. webpack将样式文件当成模块打包到出口的js文件中
3. 通过style-loader在html文件中创建style标签,并将js中内容抽出插入到style中

2.2 下载所需要的loader包

将loader安装到开发依赖, 项目打包上线以后,就不需要这些loader了

$ yarn add css-loader  style-loader -D

2.3 配置处理样式文件的loader

// loader的配置 
module:{
    // rules 规则, 详细的loader配置, 
    // 不同的loader 处理不同的文件
    rules:[
        // rules 规则是一个数组,里面可以配置多个规则,一个规则就是一个对象
        {
            // 正则, 匹配所有后缀名为css的文件并使用下面的loader处理
            test: /\.css$/,  
            // use 使用 使用那些loader 处理匹配成功的文件
            use:[
                // style-loader 创建style标签
                // 在将js中的样式资源插入到style标签中,并添加要页面的head中
                "style-loader",
                // css-loader会将css文件处理为commonjs模块并加载到js中
                // 文件中的内容是样式字符串
                "css-loader"
            ]
        }
    ]
},

2.4 打包

$ webpack

3. 打包less 样式文件

打包less样式文件,我们就需要有能够将less转为css文件的loader

3.1 下载处理less文件的loader

$ $ yarn add less-loader -D

3.2 配置处理less样式文件的loader

// loader的配置 
module:{
    rules:[
        // 配置处理less文件的规则
        {
            test: /\.less$/,  
            use:[
                "style-loader",
                "css-loader",
                // 将less文件编译为css文件,再用处理css文件的loader处理后续
                "less-loader"
            ]
        }
    ]
},

配置完毕以后就可以在命令行使用webpack命令进行打包了