4.webpack4打包样式资源

4.1 执行步骤

1）创建文件，如下图（红框部分）

上图中的webpack.config.js为，webpack配置文件

src目录下的index.js为入口文件（指示webpack以index.js文件作为入口起点开始打包，分析构建内部依赖图的开始。进入起点后，webpack会找出有哪些模块和库是入口起点直接或间接依赖的）

index.css和index.less文件是作为测试webpack4打包样式资源的样式文件

2）下载相关依赖：

①webpack@4.41.6

②webpack-cli@3.3.11

后续，webpack、webpack-cli不再作为条件出现在文档中（默认有）

③style-loader@1.1.3、css-loader@3.4.2、less-loader@5.0.0、less@3.11.1

    要想使用less-loader必须下载less依赖，因为less-loader依赖less。less-loader的作用是将

    less文件编译成css文件

    css-loader的作用是将css文件以字符串的形式变成commonjs模块加载到js中，里面内容是

    样式字符串

    style-loader的作用是：将js中的css样式资源以style标签的形式插入至html文件中的head

    标签

注意：采用style-loader的方式会导致出现页面闪屏现象，后续我们会使用mini-css-extract-plugin依赖替代style-loader去将css提取成为单独文件解决。且style-loader自带HMR热模块替换，所以style-loader在开发环境使用，mini-css-extract-plugin在生产环境使用

下面来看代码，一些细节会在代码中有注释，核心代码为webpack.config.js，其余代码起辅助理解作用

4.2 代码段

(1) 核心代码：webpack.config.js

const { resolve } = require("path")
module.exports = {
    // 配置webpack打包的入口起点
    entry: "./src/index.js",
    // 输出
    output: {
        // 输出打包后的入口文件名
        filename: "built.js",
        // 打包后的入口文件输出路径
        path: resolve(__dirname, "build")
    },
    // loader的配置
    module: {
        rules: [
            //打包css样式资源
            {
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: ["style-loader","css-loader"]
            },
            {
                test: /\.less$/,
                use: ["style-loader","css-loader","less-loader"]
            }
        ]
    },
    plugins:[],
    mode: "development" //mode填development或者production
}

上面代码段注意事项：

  上面涉及的loader作用再前面已经介绍过，不再赘述。

  ① 在进行配置css、less样式资源处理时，use中配置的loader依赖是有顺序的，在进行webpack打包时，其执行顺序是从右至左 / 从下至上，如css处理时：先执行css-loader再执行style-loader。执行是有顺序的也很好理解，在less处理时，先得将less转成css文件，才能将css文件以字符串的形式变成commonjs模块加载到js中

 ② 这里提前说下后续的js资源压缩，js资源压缩实际是通过mode: "production"去实现， 生产环境下会自动压缩js代码，内部通过依赖UglifyJsPlugin实现了JS代码压缩。

 ③ 第一行的resolve引入nodejs中的path模块，这里不做赘述，自己去了解nodejs常用模块，

  __dirname为nodejs中的，表示当前文件的绝对路径

（2）index.css

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: pink;
}

(3) index.less

#title {
    color: #fff;
}

4.3 整个流程涉及的控制台命令

执行下面命令进行安装后若执行webpack进行打包失败，若出现依赖版本问题导致，可以使用命令精确安装上面列出的版本号依赖解决

1）安装webpack、webpack-cli(用于命令行的方式操作webpack)

        npm i webpack@4.41.6 webpack@3.3.11 -D

        安装完成后，可使用npx webpack -v查看当前webpack版本号

        上面命令实际使用-G安装至全局也行

2）安装style-loader、css-loader、less、less-loader

        npm i style-loader css-loader less less-loader -D

3）使用终端打开webpack.config.js所在目录，执行如下命令：

        webpack

4）打包成功后会生成buit.js文件，再创建一个index.html文件将built.js文件引入，可以通过控制台看见head标签中存在进行打包后生成的style标签