webpack学习（三）

下面继续学习样式的打包。

因为css样式属于静态文件，并且他们之间没有任何联系，因此，需要安装loader加载器，来将静态样式文件打包到bundle.js中，因此运行如下命令安装加载器：

npm install css-loader style-loader

css-loader：加载.css文件
style-loader：使用<style>将css-loader内部样式注入到我们的HTML页面
运行此命令后生成了一个node_modules的文件夹，里面是一些依赖文件。以及一个package-lock.json文件，作用是锁定了包的版本，确保能够避免包版本不同产生的问题。

新建一个style.css文件，编写内容，然后引入到main.js文件中；

*style.css*
body {
    background: #ff0000;
    text-align:center;
    width: 100%;
}

*main.js*
require('!style-loader!css-loader!./style.css')
var tryStr = require('./subMethod.js')

document.write(tryStr())

main.js中引入了style.css,前面require('!style-loader!css-loader!【文件路径】')这是固定的引入写法。

运行webpack main.js bundle.js进行打包，然后查询index.html文件，看看样式是否生效

图1：运行index.html

至此，我们已经一起学习了简单的webpack打包，下一节我们将进行深入学习。