webpack基础知识与工具使用

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

我目前所用的版本：

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

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

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

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

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

在控制台使用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");