3、webpack管理资源-加载css文件

※项目使用前文webpack起步建立的项目

1）安装css-loader和styple-loader

npm install css-loader style-loader --save-dev

2）修改webpack.config.js，追加css模块加载规则

const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { // 添加模块加载规则 rules: [{ test: /\.css$/, // 要加载的文件后缀，无引号 use: [ // 使用的加载器 'style-loader', 'css-loader' ] }] } }

 

3）添加src/style.css文件

.hello { color: red }

4）修改src/index.js文件，使用style.css文件

import _ from 'lodash'; import './style.css'; // 导入css文件 function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], '--'); // 组件元素追加class样式 element.classList.add('hello'); return element; } document.body.appendChild(component());

5）编译查看结果 

npm run build