首先在根目录下创建一个webpack.config.js

里面用的是node的commonjs

安装依赖

  1. npm i css-loader style-loader -D

配置webpack.config.js

  1. const {resolve}=require('path')
  2. module.exports={
  3.     entry:'./src/index.js',
  4.     output:{
  5.         filename:'main.js',
  6.         path:resolve(__dirname,'build')
  7.     },
  8.     // loader的配置
  9.     module:{
  10.         rules:[
  11.             {
  12.               //这里就是配置的css
  13.                 test:/\.css$/,
  14.                 use:[
  15.                     'style-loader',
  16.                     'css-loader'
  17.                 ]
  18.             }
  19.         ]
  20.     },
  21.     plugins:[],
  22.     mode:'production'
  23. }

我们在src/assets/css，里创建一个one.css

写上

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

index.js中引入

  1. import  './assets/css/one.css'

最后我们执行命令webpack就可以打包了

然后在build里面会生成一个main.js

我们自己先手动创建一个index.html，然后链接上main.js

我们写一个h1 的文字

预览下结果就是红色的字，成功了