[TOC]

1、安装style-loader和 css-loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。 Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css。

E:\1010\webpack>npm install —save-dev style-loader css-loader

2、创建：webpack.config.js

const path = require(“path”); //Node.js内置模块,不需要更改
module.exports = {
entry: ‘./src/main.js’, //配置入口文件
output: {
path: path.resolve(dirname, ‘./dist’), _//输出路径，dirname：当前文件所在路径
filename: ‘bundle.js’ //输出文件
},
module: {
rules: [{
test: /\.css$/, //打包规则应用到以css结尾的文件上_
use: [‘style-loader’, ‘css-loader’]
}]
}
}

3、在src文件夹创建style.css
image.png

body{
background:pink;
}

4、在src文件夹创建main.js

  • 在第一行引入style.css

image.png

require(‘./style.css’);//注意 CSS 文件的 后缀不能省略。

5、执行编译命令

E:\1010\webpack>webpack —mode=development

image.png

6、测试：在webpack 下创建01.html页面，并使用