Webpack打包工具的使用---打包引用JS和CSS文件

1、webpack概述:

webpack是一款加载兼打包工具,它能把各种资源,例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

2、全局安装:

在安装Webpack之前,我们的本地环境需要支持node.js。安装node.js可以参考node官方文档。

使用如下命令在全局安装webpack

npm install webpack -g


3、webpack的使用步骤

A:JS文件的引用

(1)创建一个名为webpack的文件夹,里面创建两个文件夹,一个是app,一个是build;创建一个名为”webpack.config.js“的配置文件。

(2)在webpack文件夹下执行以下命令,生成package.js文件:

npm init

文件内容如下:此文件用来告知一些基本信息

Webpack打包工具的使用---打包引用JS和CSS文件_第1张图片

(3)在webpack文件夹下执行以下命令,配置webpack的相关服务:

npm install --save-dev webpack-dev-server
经过以上操作,package.json文件中,多出以下一段代码:


(4)配置在第一步创建的webpack.config.js文件:

Webpack打包工具的使用---打包引用JS和CSS文件_第2张图片

如图所示:app文件夹中需要有index.js文件,可以随便写一些js代码进去,然后在build文件夹中需要有bundle.js文件,它就是打包文件。

(5)打包文件的使用:

 在build文件夹中新建一个index.html文件,引入同目录下的bundle.js文件。

配置快速启动webpack,在package.json文件里加入

 "scripts": {
     "start": "webpack",
     "server": "webpack-dev-server --open"
   },

到此,我们的package.json文件里的内容是这样的:

Webpack打包工具的使用---打包引用JS和CSS文件_第3张图片

如果有哪里不对的,小伙们记得自己检查一下啊。

(6)运行终端,打包js文件到bundle.js

在终端中,定位到当前文件夹webpack---cd 当前目录

然后执行webpack命令,webpack就已经开始运行了:

Webpack打包工具的使用---打包引用JS和CSS文件_第4张图片

(7)之后去运行index.html页面,就能看到效果了。


B:CSS文件的引用

 经过了引入JS的操作,引入CSS文件的操作就简单多了

(1)首先,我们需要下载css样式加载模板的文件

npm install style-loader css-loader --save

(2)在配置文件中,加入以下代码:

Webpack打包工具的使用---打包引用JS和CSS文件_第5张图片

这里尤其需要注意的一点是,在运行终端之前,

需要在index.js文件中,引入index.css文件,以便于二者一并被打包起来。


现在的终端界面是这样的:

Webpack打包工具的使用---打包引用JS和CSS文件_第6张图片

细心的小伙伴可能发现了,刚才的那张终端截图,它只监控着index.js的运行,

而上面这张,加入了css的监控和打包,是不是很神奇啊


另外还有一点需要注意的是,加完上述打包css的代码后,需要重新运行打包命令哦,

否则会显示一个“模块加载失败,你可能需要一个适合的加载器加载这个文件”的错误,小伙伴们注意一下哈。


这样,我们就可以在index.html引入包含css和js的bundle.js打包文件了,

在css文件和js文件中编辑会实时在bundle.js中展现在index.html文件中



你可能感兴趣的:(其他,Node.js学习)