webpack打包样式资源(三)

本篇文章主要讲述webpack.config.js的自定义配置以及对样式资源打包的处理。

首先还是创建2个文件夹src和build参考之前所说webpack打包(二)。

接下来主要说一下webpack.config.js这个文件的作用以及loader的用法(打包css、less)。

在src的同级目录中创建一个文件叫做webpack.config.js。

webpack.config.js的作用：指示webpack做哪些事情。一旦运行了webpack就会加载其中的配置。

所有的构建工具都是基于node.js运行，而模块化采用的是common.js。项目用的是es6，配置用的是common.js。

第一步用common.js语法暴露webpack的相关配置(五个核心)。

 1 module.exports = {
 2     entry: '',
 3     output: {
 4         filename: '',
 5         path: '',
 6     },
 7     module: {
 8         rules: [
 9             {
10                 test: / /,
11                 use: [
12 
13                 ]
14             }
15         ]
16     },
17     plugins: [
18     ],
19     mode: '',
20 }

entry：指示从那个文件开始打包。

output：打包到哪里去。

filename：文件打包成功后的名字。

path：文件打包后的路径(一般用绝对路径)。

module：loader的相关配置。

rules：运行webpack成功后会进入rules寻找loader规则。多个规则则创建多个对象。

test：类似js的正则表达式的匹配，用来匹配某个后缀名的文件，然后对其进行解析。

use：指定使用哪些loader对其进行解析，这里注意一点，use是一个数组，对于其中的属性解析的时候，执行顺序是从右往左，从下往上进行依次执行。也就是说从末尾开始执行解析。

plugins：对复杂业务的处理。

mode：指定以哪种模式打包。值为development/production。

好弄清这些属性的意思我们再来写其中的内容。假设我们现在要打包一个css文件，上篇内容已经测试过常规方法是不能够打包css文件的会报错。

/**
 * webpack 配置文件
 * 作用：指示webpack干那些活(当你运行webpack的时候会加载其中的配置)
 * 
 * 所有的构建工具都是基于node.js运行~模块化采用common.js。项目用的是es6，而配置用的是common.js。
 */

//nodejs语法：resolve用来拼接绝对路径的方法
const { resolve } = require('path');

//暴露对象 写webpack相关配置(五个核心配置)
module.exports = {
    //入口起点
    entry: './src/index.js',
    output: {
        //输出文件名
        filename: 'built.js',
        //路径
        //__dirname nodejs的变量，代表当前文件的目录的绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader的配置(翻译)
    module: {
        rules: [
            //详细loader

            {
            //正则匹配符合后缀的文件遍历rules一旦发现以css结尾的文件进行处理
                test: /.css$/,
                //使用哪些loader
                use: [
                    //use中的lodaer执行顺序是从右到左(从下到上)依次执行
                    //创建一个style标签，将js中的css样式资源插入进去，添加到页面中的head生效。
                    'style-loader',
                    //将css文件以字符串的形式变成commonjs的一个模块加载到js中，里面的内容是样式字符串。
                    'css-loader'
                ]
            }
        ]
    },
    //plugins的配置
    plugins: [
        //详细plugins的配置
    ],
    //模式(两个值不能同时写)
    mode: 'development',    //开发模式
    //mode: 'production'    //生产模式
}

这里需要注意的一点是，在写路径的时候我们用到了一个新的属性resolve，以及__dirname。

那这样我们就可以很好理解为从src下面的index.js文件开始打包，输出到build文件下的built.js。

这里为了方便以后的使用，我们将包的管理都安装在外面。在最外面安装style-loader和css-loader。 --npm i style-loader css-loader -D

style-loader：创建style标签，将js中的css样式插入到style标签里。

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

安装成功后我们来创建一个css文件输入任意样式看看html文件有没有根据样式进行改变。在src文件夹中创建2个文件分别是index.js和index.css。代码如下：

index.css

1 html body{
2     height: 100%;
3     background-color: pink;
4 }

index.js

1 import './index.css'

直接输入webpack命令打包。可以看到打包成功的界面。

而且build文件夹中也多了一个built.js文件。然后我们在该文件夹中创建一个html文件引入这个js文件看一下是否能够改变html的颜色。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>webpack</title>
 8 </head>
 9 
10 <body>
11     <script src="./built.js"></script>
12     <h1>hello webpack</h1>
13 </body>
14 
15 </html>

运行后的页面：

嗯没错变成了粉色。然后按F12看一看样式是如何加入的。

可以看到是创建一个style标签插入到head中。

接下来我们引入一个less文件试一下。新建一个less文件代码如下：

1 h1 {
2     color: #ffffff;
3 }

在rules中新加如一个匹配less后缀的规则以及loader：

1 {
2     test: /.less$/,
3     use: [
4         'style-loader',
5         'css-loader',
6         'less-loader'
7     ]
8 }

less-loader：将less文件编译成css文件。

在index.js中引入less文件

1 import './index.css'
2 import './index.less'

继续外部引入包 less-loader，这里注意一下还要引入一个less的包。--npm i less less-loader -D

然后输入webpack打包。

进入页面刷新。可以看到结果：

字体变成白色的了。然后F12看一下如何编译less的：

也是插入style标签转成了css文件输出。

以上就是关于自定义配置以及css打包的内容。