下面继续学习样式的打包。
- 因为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打包，下一节我们将进行深入学习。
