webpack4中插件css的处理

﹏ヽ暗。殇╰゛Y 2022-12-23 14:25 82阅读 0赞

### 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']
    
    }, ]

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack使用插件将css抽取出来

前言：我们使用加载器来加载css样式，但是此时css是通过js动态创建<style>标签来写入，如果不希望这样做，可以使用插件 extract-text-webpa

柔情只为你懂/ 2023年10月18日 09:46/ 0 赞/ 5 阅读

相关 webpack4中插件css的处理

1:新建文件index.css 里面随便写点样式\\ 例如：background：pink 2:在index.js中引入index.css import "./ind

﹏ヽ暗。殇╰゛Y/ 2022年12月23日 14:25/ 0 赞/ 83 阅读

相关 webpack4中插件使用

1:安装插件html-webpack-plugin 进行页面js自动引入更新 npm install html-webpack-plugin --save-dev

绝地灬酷狼/ 2022年12月23日 14:24/ 0 赞/ 163 阅读

相关 webpack处理css

在[神奇的babel][babel]中我们提到了babel-loder的使用，那么webpack声称可以处理任何类型的文件，css该怎么处理呢，好，我们来走一遍首先介绍下s

电玩女神/ 2022年06月18日 03:54/ 0 赞/ 146 阅读

相关 webpack的CommonsChunkPlugin插件

暂时先放代码，他日完善说明 plugins: \[ new ExtractTextPlugin("\[name\]/css/\[name\].c

比眉伴天荒/ 2022年06月16日 06:58/ 0 赞/ 160 阅读

相关 webpack时候插件版本冲突问题处理

webpack用来打版js 写在npm scripts里才会去找node\_modules里的webpack，直接命令行运行就是全局的。直接运行时候，本地的版本冲突，所以

心已赠人/ 2021年12月13日 18:09/ 0 赞/ 704 阅读

相关 webpack4 自定义插件plugins

插件即是一个class类,wb会调用其中的apply方法涉及到的内容:compiler、tapable和compilation 配置:

我不是女神ヾ/ 2021年07月24日 22:45/ 0 赞/ 574 阅读

相关 webpack4 常用插件

1、copy-webpack-plugin拷贝文件 (1)下载 cnpm install copy-webpack-plugin --save-dev

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 22:27/ 0 赞/ 429 阅读

相关 webpack4 简化构建输出插件friendly-errors-webpack-plugin

1、下载 cnpm install friendly-errors-webpack-plugin -D 2、配置 plugi

た入场券/ 2021年07月24日 15:58/ 0 赞/ 496 阅读

相关 webpack4 优化耗时分析speed-measure-webpack-plugin插件

能够列出输出、loader和plugins的耗时,过长将会使用黄色和红色显示 1、下载 cnpm install -D speed-measure-w

男娘i/ 2021年07月24日 13:25/ 0 赞/ 1883 阅读