[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)
