2.Webpack打包样式资源（入门）

写这篇入门文也算是给自己巩固一下知识，现目前自己也在自学webpack，很多地方还有不懂得地方感谢各位提出意见。

目的：了解webpack五大核心概念中的loader属性（让webpack能够去处理那些非javaScript文件）。

注：webpack能处理js、json资源。（可自行测试）。

开始搭建webpack项目：

一、我们先创建一个项目文件夹webpack-two-css，然后在项目文件夹下创建  src  和  build 这两个文件夹：

        src我们用来放项目源码的位置

        build文件夹我们用来放项目文件经过webpack打包过后生成的代码

然后我们再在文件夹src下创建文件夹 index.js （作为我们webpack模块打包的入口文件）和创建index.css文件（这是我们的样式文件）。

（这里先不管 node_modules这个文件，就当他不存在）

二、我们在 index.css文件内写入你想写入的样式。

建立好了 index.css文件之后我们需要将css文件引入到我们的入口文件index.js文件内去

简简单单的写入进去。

三、重点来了

我们在我们的项目文件夹webpack-two-css下新建一个js文件 webpack.config.js文件。

webpack.config.js是webpack的配置文件。他的作用在于提示webpack干哪些活（当你运行webpack指令的时候，会加载这个文件内的配置）

注意：所有的构建工具都是基于 nodejs 平台运行的，模块化默认采用 commonjs。 src文件内是写项目的文件所以用 ES6模块化 而webpack.config.js是配置文件所以使用common.js。

建立好wenbpack.config.js文件之后我们开始来写这里面的配置。

 entry：入口提示以哪个文件为入口起点开始打包。

接下来我们再在下面添加 output输出（指示打包后的资源bundles输出到那里去，以及如何命名）

绝对路径引入Node.js知识的模块path，resolve用来拼接绝对路径的方法。所以我们要在外面添加：

注意：__dirname  是两个下划线_  _  d i r n a m e。 

好我们的出口也配置好了，接下来我们需要建立loader、plugins和mode的配置了如图：

因为我们只讲loader配置，所以差不多文件基本配置完毕了。

四、我们打开终端

输入命令 npm init

没有特殊需求直接回车。（一定要注意路径是否正确）这时我们的文件夹中多了一个package.json的文件。

接下来输入命令安装webpack 和webpack-cli

npm i webpack webpack-cli -D  

（本人安装到文件内方便自己熟悉命令）

此时我们安装依赖文件夹会多出文件node_modules文件夹和package-lock.json。如图：

 回想一下我们的loader文件中含有css-loader和style-loader。所以我们都要去安装

命令：npm i css-loader style-loader -D  

此时我们安装好了依赖。

直接运行命令：webpack

看看文件夹build里面是不是多了一个build.js的文件。我们的webpack项目到这里就搭建成功了。

我们去看看build.js文件内

文件显示index.css已经被打包进来，看看eval（）中的字符串

看我们的css样式已经被webpack转为字符串的样式打包了。

最后我们在build文件夹内建立一个index.html的文件：

将次文件在浏览器内打开：

 好的到达这一步本次Webpack打包样式资源 就到这里了，后面可以自己测试一下less、img等其它样式。

本次总结基于哔哩哔哩up主：尚硅谷  的视频《尚硅谷最新版Webpack5实战教程(从入门到精通)》整合而来。