1.修改代码

在项目src目录中新建style文件夹，并新建index.css文件

  1. ├─package.json
  3. ├─dist // 存放最终打包的文件
  5. │ └─index.html
  7. ├─src // 存放入口文件等开发文件
  9. │ ├─index.js
  11. + │ └─style
  13. + │ └─index.css
  15. ├─webpack.config.js // webpack的配置文件

接着在index.js的createElement方法中为div添加box类名

  1. import _ from 'lodash';
  2. import './style/index.css';
  4. function createElement() {
  5.     let div = document.createElement('div');
  6.     div.innerHTML = _.join(['my','name','is', 'jie'])
  7.     div.className = "box"
  8.     return div;
  9. }
  11. document.body.appendChild(createElement())

然后编写index.css：

  1. .box {
  2.     color: red;
  3. }

注意：
这里使用import ‘./style/index.css’引入样式表是无法解析的，我们需要在webpack中使用第三方插件loader：

  • css-loader: 用于处理css文件，使能在js文件中被引用；
  • style-loader： 用于将css文件注入到index.html的