webpack4中插件css的处理

1:新建文件index.css 里面随便写点样式\

例如：background：pink

2:在index.js中引入index.css import "./index.css"

3:引入css-loader

npm install --save-dev css-loader

npm install --save-dev  style-loader

4:在webpack.config.js中配置中添加

module: {

    rules: [

      {

        test: /\.css$/i,

        use: ['style-loader', 'css-loader'],

      },

    ],

  }

然后运行

npm run build

但是css的引入会在js中 需要分离 才符合正常的阅读习惯

安装辅助

 npm install --save-dev mini-css-extract-plugin

第一步引入

webpack.config.js中

var MiniCssExtractPlugin = require('mini-css-extract-plugin');

第二步配置

new HtmlWebpackPlugin({

title: 'webpacktitle',

template: "public/index.html",

chunks: ['main']

}),

new MiniCssExtractPlugin({

filename: '[name].[hash].css'

})

第三步修改配置

rules: [{

test: /\.css$/i,

use: [MiniCssExtractPlugin.loader, 'css-loader']

}, ]