webpack入门教程--2

这次是创建第二个JS文件。

我们还是在app文件夹中创建一个叫做book2.js的JS文件，并在其中输入以下代码：

module.exports = "It works from book2.js.";

然后咱们更新book1.js代码，把原来的内容删除，然后输入以下代码：

document.write(require("./book2.js"));

然后我们使用webpack命令来打包：在Git中输入以下命令

webpack book1.js bundle.js

然后等到打包结束之后，咱们在浏览器中打开index.html,可以看到页面中显示的一句话“It works from book2.js.”这其实就是我们把两个js文件打包成了一个文件了。

webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。 在页面启动时，会先执行 book1.js 中的代码，其它模块会在运行 require 的时候再执行。

有一点需要声明，webpack只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。index文件中可定是需要使用css文件的，所以我们需要css-loader和style-loader，他们做两个不同的事情，css-loader会便利CSS文件，然后找到url（）表达式然后处理他们，style-loader会把原来的CSS代码插入页面的一个style标签中。

同样我们使用git命令来安装css-loader和style-loader；在命令中输入以下语句：

cnpm install css-loader style-loader

同样的，git是在app文件夹中git bash here。

这时候咱们会发现app文件夹中会多出一个node_modules的目录，探究式css-loader和style-loader的安装目录。

然后咱们在app文件夹中新建一个叫做style.css的文件，并且里面是下面的代码：

body {
    background: yellow;
}

并且咱们还要修改book1.js中的内容，修改为：

require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

然后咱们继续使用webpack命令来打包：webpack book1.js bundle.js

咱们我们就可以运行index.html文件了。咱们发现里面确实变黄了。

require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!，当然我们可以根据模块类型（扩展名）来自动绑定需要的 loader。 将 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改为 require("./style.css") ：

修改book1.js的内容为：

require("./style.css");
document.write(require("./runoob2.js"));

然后打包的时候，咱们要输入：

webpack book1.js bundle.js --module-bind 'css=style-loader!css-loader'

会出现同样的结果；