webpack5打包工具的使用一：工程化项目的初始化和项目对于css/sass的应用

大家好，我是前端啊川，正在争取做一个能把一个功能点细节讲的详细的博主。

相信很多前端开发人员都知道，项目开发完，里面会涉及到很多像ES6模块化/.css/.less/.sass这样的文件。那这样的代码要想让浏览器能够识别并运行，那么就必须编译成浏览器能够识别的.js/.css文件。

首先，先来创建一个项目demo，并在项目根目录下创建一个src文件夹和一个public文件夹。在src文件夹里面创建一个main.js文件和一个名为js的文件夹。分别的作用就是main.js把它作为项目打包的主入口文件，假设项目的所有逻辑运算和样式文件都在这个文件引入。js文件夹里面我会放简单的两个js文件，来作为后续的一个讲解。public文件夹里面创建一个index.html文件作为该单页面应用的启动页。创建完成后，项目结构是这样的：

其次在js文件夹下创建了一个count.js文件和sum.js文件，都是用来求和的函数。

    // count.js
    export default function count(x, y) {
      return x - y;
    }
    // sum.js
    export default function sum(...args){
      return args.reduce((prev, cur) => prev + cur, 0);
    }

最后我在main.js文件去引入这两个求和函数，并在index.html文件中引入main.js这个主入口文件。来看看运行到浏览器会出现什么结果

    // main.js
    import count from "./js/count";
    import sum from "./js/sum";
    console.log(count(2, 1));
    console.log(sum(1, 2, 3, 4));

会发现浏览器运行时控制台报错了 问题出现的原因就是浏览器目前没有办法识别模块化导入语句。所有这个时候webpack就派上用场了。

如何初始化webpack项目

1. 首先需要在项目的控制台中输入npm init -y，等待它初始化成功。成功后，项目结构会出现一个package.json的文件
2. 第二步呢，需要安装webpack这个依赖包了，执行npm install webpack webpack-cli -D。以上两步都执行成功后，项目的package.json文件会变成下图这样的形式 这边要注意的一点就是，package.json文件中的name这个属性的值不能是webpack。原因就是在执行完npm init -y初始化时，如果这个name的值为webpack，会导致后续安装依赖包的时候webpack下载不下来。
3. 那么现在webpack下载好了，来熟悉一下webpack的五大核心概念。

entry(入口)：告诉webpack从哪个文件开始打包；
output(输出)：提示webpack打包完成的文件放到哪里去，以及打包完成的文件命名等；
loader(加载器)：因为webpack只能处理js,json等资源，所以其他资源就必须借助loader加载器来完成；
plugins(插件)：拓展webpack的功能；
mode(模式)：主要分为开发模式(development)和生产模式(production)。

1. 要完成这些配置呢，就需要在项目根目录下创建一个webpack.config.js文件了。下图配置好了的文件。主要就是告诉webpack帮我从src目录下的main.js文件开始打包，将打包完成后的文件dist放到项目根目录下，并在dist文件夹中生成名为main.js的主入口文件。
2. 现在我把原先index.html中引入的src目录下的main.js文件改成dist目录下的main.js文件，执行npx webpack，再打开项目，看看控制台会出现什么结果。

这个时候，main.js引入的两个方法结果成功计算出来了。

到这里，如果我想要我的项目更加美观，不仅仅就是只有html结构，我还想要设置样式，该怎么办呢？我先以css为例

1. 我在src目录下创建一个css文件夹，里面创建一个index.css文件；
2. 并设置一个长宽都为100px,背景色为红色的box1的类。并将其引入到main.js中；

//index.css
.box1{
	width: 100px;
	height: 100px;
	background-color: red;
}
// main.js
import './css/index.css'

1. 执行npx webpack。会发现报错了，原因就是webpack只能识别js和json资源，识别不了css文件。
2. 这个时候就需要使用加载器来完成css样式文件的打包了。
3. 要使用css加载器呢，需要先下载对应的依赖包，分别需要安装style-loader,css-loader，也是执行npm install style-loader css-loader -D。等安装完成后，我们需要在webpack配置文件中去配置对应的加载器。

module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/, // 只检测.css文件
        use: [
          // 执行顺序，从下到上
          'style-loader', // 将js中css通过创建style标签添加到html文件中，让样式生效
          'css-loader' // 将css资源编译成commonJs的模块到js中
        ] 
      }
    ]
}

1. 这些都配置完成后，再来执行npx webpack。打开页面，发现对应的样式已经被成功挂载到head标签里面了

如果是sass/scss呢？

1. 我在src目录下创建一个scss文件夹，里面创建一个index.scss文件；
2. 并设置一个长宽都为100px,背景色为黄色的box2的类。并将其引入到main.js中；

//index.scss
.box2{
	width: 100px;
	height: 100px;
	background-color: red;
}
// main.js
import './scss/index.scss'

1. 我们也是需要安装对应的加载器，不过这两个的加载器都是sass-loader，只需要安装一次就可以了。执行npm install sass sass-loader -D.
2. 再在webpack配置文件中去配置对应的加载器

module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/, // 只检测.css文件
        use: [
          // 执行顺序，从下到上
          'style-loader', // 将js中css通过创建style标签添加到html文件中，让样式生效
          'css-loader' // 将css资源编译成commonJs的模块到js中
        ] 
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader' // 将scss文件编译成css文件
        ]
      }
    ]
}

1. 这些都配置完成后，再来执行npx webpack。打开页面，发现对应的样式同样也已经被成功挂载到head标签里面了 现在就可以去使用对应的类了。

文章中安装的很多依赖包都是安装在开发环境下的，因为项目工程化打包只需要在开发环境执行