webpack基础知识与工具使用

爱被打了一巴掌 2022-05-20 06:47 236阅读 0赞

webpack是一个前端资源加载/打包工具，将根据模块的依赖关系进行静态分析，并依据规则生成对应的静态资源。

在安装webpack前，本地环境需要已安装了node.js，然后npm install webpack -g进行安装。

在使用wepack show.js bundle.js打包单个js文件发生错误。

**多个./hello.js bundle.js中的错误**

**找不到模块：错误：无法解析'H：\\ webpack-test \\中的'bundle.js'**

** @ multi ./show.js bundle.js main\[1\]**

解决办法：

旧版本是这样进行打包：

webpack show.js bundle.js   
但是新版本后我们应该用这样的命令

webpack show,js -o bundle.js

我目前所用的版本：

![70][]

接下来尝试进行打包show.js

![70 1][]

这时报错消失，在项目目录下，自动添加了一个新的文件bundle.js.

上面只是打包一个js文件，很难看出其中产生了那些依赖关系，下面是webpack打包多个文件的演示。

str.js文件，提供show.js文件需要的数据，可以是字符串，json格式的数据，还可以是函数，使用module.exports将数据暴露出去。

![70 2][]

show.js使用require接受数据并显示。

![70 3][]

在控制台使用webpack show,js -o bundle.js命令重新生成bundle.js文件。

样式的打包：

通过安装loader加载器，可以将静态的样式文件一同打包到bundle.js文件中，通过下列命令安装加载器。

npm install css-loader style-loader

css-loader使你能够使用类似@import和url（...）的方法实现require的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。

因此，我们这样配置后，遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件，遇到“@import”等语句就将相应样式文件引入（所以如果没有css-loader，就没法解析这类语句），最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。

需要注意的是，loader是有顺序的，webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。因此应该把style-loader放在css-loader的前面（webpack loader的执行顺序是从右到左）。

安装完成后编写style.css文件，在show.js文件引入这个文件

require("!style-loader!css-loader!./style.css");

![70 4][]

样式显示成功。

配置文件：webpack.config.js

在手动编译时，可以将一些经常性的操作，添加到配置文件，减少编译过程中，手写代码的数量，构造自动工具。

![70 5][]

这不用使用webpack show.js -o bundle.js来编译生成bundle.js文件，我们可以直接使用webpack来编译。

安装第三方库文件

在项目中安装jQuery第三方库，并在使用时，通过require函数引入安装的库文件，就可以使用这个库文件。

npm install jquery --save-dev

导入

var $=require("jquery");

$("div").html("ok");

修改package.json

![70 6][]

这时可以通过npm run build来编译生成bundle.js文件，不用在使用webpack

**服务器端环境安装**

通过安装webpack-dev-server模块，可以将项目打包到服务端，并可以通过指定端口，同时，还可以配置启动命令。

npm install webpack-dev-server --save-dev

安装完成

![70 7][]

添加start

![70 8][]

在控制台输入npm start启动项目

![70 9][]

这时可通过8080端口访问页面。

![70 10][]

在package.json中找到这段代码加上--watch可自动检测代码的变化，不用重新编译。

webpack入门视频：[http://edu.51cto.com//center/course/lesson/index?id=214838][http_edu.51cto.com_center_course_lesson_index_id_214838]

[70]: /images/20220520/e317eb3cbb114c70a847fb49a831b6b0.png
[70 1]: /images/20220520/9c32a74fc64b45c398dc6a4b3529bbdc.png
[70 2]: /images/20220520/d6f57566027843a3b2746dd04824ca6b.png
[70 3]: /images/20220520/c4270d5fdda24d059ed0bea2ff59c7bf.png
[70 4]: /images/20220520/bdc8f85bc55642f7b27e9058b716d10d.png
[70 5]: /images/20220520/c463fcc67ea142bdb993896eee6e22be.png
[70 6]: /images/20220520/5e50ef4005404611b0b9422a2c24c00b.png
[70 7]: /images/20220520/f2e8b960fad2446aa08cc8b5f9e72992.png
[70 8]: /images/20220520/42495919eb604347a6c4cebbc8bf87d7.png
[70 9]: /images/20220520/aea2bdf2d6e946bfab83564f822737ef.png
[70 10]: /images/20220520/c04ccef198194e67b9bd0f914ed7c17a.png
[http_edu.51cto.com_center_course_lesson_index_id_214838]: http://edu.51cto.com//center/course/lesson/index?id=214838