[Node] Node.js Webpack和打包过程

JavaScript
const path = require('path')

// 导出配置信息
module.exports = {
    entry:"./src/main.js",
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"./dist")
    }
}

指定配置文件

如果我们的配置文件不是webpack.config.js的名字而是其他的?

如我们将webpack.config.js修改成xiong.config.js

这时我们通过 --config来指定对应的配置文件

JavaScript
webpack --config xiong.config.js

但是每次执行命令来对源码进行编译会很繁琐,所以我们可以在packa.json中增加一个脚本

JavaScript
{
Debug
    "scripts":{
        "build":"webpack --config xiong.config.js"
    },
    "devDependencies":{
        "webpack":"^5.14.0",
        "webpack-cli":"^4.3.1"
    }
}

Webpack的依赖图

webpack到底是如何对我们的项目进行打包的?

事实上 webpack在处理应用程序时会根据命令或者配置文件找到入口文件

从入口开始生成一个依赖关系图这个依赖关系图会包含应用程序中所需的所有模块(如 js css 等)

然后遍历图结构,打包成一个个模块(根据文件的不同使用不同的loader来解析)

4 编写和打包CSS文件

css-loader的使用

Loader 可以用于对模块的源代码进行转换

我们可以将css文件也看成一个模块,我们通过import来加载这个模块

在加载这个模块时 webpack其实并不知道如何对其进行加载,必须要指定对应的loader来完成这个功能

我们需要一个什么样的loader?

对于加载css文件来说我们需要一个可以读取css文件的loader

这个loader最常用的是css-loader

CSS-loader的安装

JavaScript
npm install css-loader -D

CSS -loader 的使用方案

如何使用loader来加载css文件呢? 有三种方式:

1 内联方式:

在引入的样式前加上使用的loader,并使用!分割

JavaScript
import "css-loader!../css/style.css"

2 CLI方式(webpack5中不再使用)

已淘汰..

3 配置方式

loader配置方式

我们的webpack.config.js文件中写明配置信息:

module.rules中允许我们配置多个loader(因为我们也会继续使用其他的loader,来完成其他文件的加载)

这种方式可以更好的表示loader的配置也方便后期的维护同时也让你对各个loader有一个全局的概览

module.rules的配置如下:

rules属性对应的值是一个数组[Rule]

数组中存放的是一个个Rule,Rule是一个对象,对象中可以设置多个属性

test属性:用于对resource(资源)进行匹配,通常会设置正则表达式

use属性:对应的值是一个数组:[UseEntry]

UseEntry是一个对象可以通过对象的属性来设置一些其他的属性

loader:必须有一个loader属性,对应的值是一个字符串

options:可选属性值是一个字符串或对象,值会被传入loader中

query:目前已经使用options来替代;

传递字符串(如:use:['style-loader'])是loader属性的简写方式:(如:use[{loader:'style-loader'}])

loader属性:Rule.use:[{loader}]的简写

认识style-loader

可以通过css-loader来加载css文件了

但是发现这个css在我们的代码中没有生效(页面没效果)

为什么呢?

因为css-loader只负责将.css文件进行解析,并不会将解析之后的css插入到页面中

如果我们希望再完成插入 style的操作,我们还需要另外一个loader 就是 style-loader

安装 style-loader

JavaScript
npm install style-loader -D

配置style=loader

在配置文件中添加 style-loader

注:因为loader的执行顺序是从右向左(或者说从下到上,从后到前)所以我们需要将style-loader写到css-loader的前面

JavaScript
use:[
    // 注 style-loader写到css-loader的前面
    {loader:"style-loader"}
    {loader:"css-loader"}
]

5 编写和打包LESS文件

如何处理less文件?

在开发中可能会使用less sass styus的预处理器来编写css样式效率更高

那么如何让我们的环境支持这些预处理器?

首先我们需要确定less sass 等编写的css需要通过工具转换成普通css

如下面编写的less样式:

CSS
@fontSize: 50px;
@fontColor:blue;

.title {
font-size: @fontSize;
color: @fontColor;
}

可以使用less-loader来处理

先使用less工具转换到css 再用style

JavaScript
npm install less-loader -D

JavaScript
{
test:/\.less$/,
use:["style-loader","css-loader","less-loader"]
}

6 postcss工具处理CSS

认识PostCSS工具

什么是PostCSS呢?

他是一个通过Js来转换样式的工具

可以帮助我们进行一些CSS的转换和适配如自动添加浏览器前缀,css样式的重置

实现这些功能需要借助于PostCSS对应的插件

如何使用PostCSS呢? 分为两步:

一:查找PostCSS在构建工具中的拓展,如webpack和postcss-loader;

二:选择可以添加你需要的PostCSS相关的插件

Postcss-loader

可以借助于构建工具:

在webpack中使用postcss就是使用postcss-loader来处理

我们来安装postcss-loader:

JavaScript
npm install postcss-loader -D

我们修改加载css的loader:(配置文件过多,给出一部分了)

注:因为postcss需要有对应的插件才会起效果.所以我们需要配置它的plugin

JavaScript
{
    loader:"postcss-loader",
    options:{
        postcssOptions:{
            plugins:[
                require('abtoprefixer')
            ]
        }
    }
}

单独的postcss配置文件

因为我们需要添加前缀,所以要安装autoprefixer;

我们可以将这些配置信息放到一个单独的文件中进行管理

在根目录下创建postcss.config.js

JavaScript
module.exports = {
    plugins:[
        // require("autoprefixer")
        "autoprefixer"
    ],
}

postcss-preset-env

preset => 预设

事实上,在配置postcss-loader时我们配置插件并不需要使用autpprefixer

我们可以使用另外一个插件:postcss-preset-env

postcss-preset-env也是一个postcss的插件

它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS 且会根据目标浏览器或者运行时环境添加所需的polyfill

也包括会自动帮助我们添加autoprefixer(相当于已经内置了autoprefixer)

首先我们需要安装它

JavaScript
npm install postcss-preset-env -D

之后我们直接修改之前的autoorefixer即可:

JavaScript
plugins:[
"postcss-preset-env"
],

coderHing[专注前端]

关注

55
点赞
踩
48

收藏

觉得还不错? 一键收藏
打赏
44
评论
[Node] Node.js Webpack和打包过程

[Node] Node.js Webpack和打包过程webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法后续我们需要通过babel进来转换和设置。所以安装webpack时我们需要同时安装webpack-cli(第三方的脚手架事实上是没有使用webpack-cli的而是类似于自己的vue-service-cli的东西)在通常情况下,webpack需要打包的项目是非常复杂的,并且我们需要一系列的配置来满足要求,默认配置必然是不可以的。显示路径会出现一些问题;
复制链接

扫一扫