likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 11

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

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

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

webpack5打包工具的使用一:工程化项目的初始化和项目对于css/sass的应用 其次在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));

会发现浏览器运行时控制台报错了 webpack5打包工具的使用一:工程化项目的初始化和项目对于css/sass的应用 问题出现的原因就是浏览器目前没有办法识别模块化导入语句。所有这个时候webpack就派上用场了。

如何初始化webpack项目
  1. 首先需要在项目的控制台中输入npm init -y,等待它初始化成功。成功后,项目结构会出现一个package.json的文件
  2. 第二步呢,需要安装webpack这个依赖包了,执行npm install webpack webpack-cli -D。以上两步都执行成功后,项目的package.json文件会变成下图这样的形式 webpack5打包工具的使用一:工程化项目的初始化和项目对于css/sass的应用 这边要注意的一点就是,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的主入口文件。 webpack5打包工具的使用一:工程化项目的初始化和项目对于css/sass的应用
  2. 现在我把原先index.html中引入的src目录下的main.js文件改成dist目录下的main.js文件,执行npx webpack,再打开项目,看看控制台会出现什么结果。

webpack5打包工具的使用一:工程化项目的初始化和项目对于css/sass的应用 webpack5打包工具的使用一:工程化项目的初始化和项目对于css/sass的应用 这个时候,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文件。 webpack5打包工具的使用一:工程化项目的初始化和项目对于css/sass的应用
  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标签里面了 webpack5打包工具的使用一:工程化项目的初始化和项目对于css/sass的应用
如果是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标签里面了 webpack5打包工具的使用一:工程化项目的初始化和项目对于css/sass的应用 现在就可以去使用对应的类了。

webpack5打包工具的使用一:工程化项目的初始化和项目对于css/sass的应用 文章中安装的很多依赖包都是安装在开发环境下的,因为项目工程化打包只需要在开发环境执行

转载自:https://juejin.cn/post/7367201514039967754
评论
请登录