[TOC]
### 1.安装依赖
~~~
npm i style-loader css-loader --save-dev
~~~
### 2. 使用方法
~~~
/* 处理项目里的资源文件,必须安装对应的loader */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title:"打包文件",
//js插入的位置
inject:"head",
//生成的模板
template:"index.html",
//生成的html的文件夹名
//filename:'[hash]-index.html,
//date:new Date() 创建一个时间属性 参看http://www.chengbenchao.top/webpack/710012
})
] ,
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
~~~
### 3. 新建 style.css
~~~
|- /src
+ |- style.css
|- index.js
//style.css
div {
background: red;
width: 100px;
height: 100px;
}
~~~
### 4.src/index.js
~~~
import './style.css';
~~~
#### 5. webpack 打包 或者npm run build
之后再dist中的html中加个div
[官网说明](https://www.webpackjs.com/guides/asset-management/#%E5%8A%A0%E8%BD%BD-css)
