webpack样式处理 — css插件

webpack样式处理 — css插件

一、 处理css文件

有了html文件后，我们想给页面增加一些css样式，此时我们就需要在js文件中引入我们需要的css文件：

require('./index.css')

运行npm run dev，此时因为js里无法解析css文件所以会报错：

解决方法：

1. 先安装css插件：

yarn add css-loader style-loader -D

2. 安装css插件成功后，配置webpack.config.js文件(见module部分)：

// webpack 是node写出来的 node的写法

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin')    //html插件

module.exports = {
    devServer:{  //开发服务器配置
        port:8080,  //修改端口号
        progress:true,  //打包进度条
        contentBase: './build', // 本地服务器所加载文件的目录
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
    },
    mode:'development', //模式 默认两种 production (生产模式)、 development(开发模式)
    entry:'./src/index.js',   //入口，可以写相对路径
    output:{
        filename:'bundle.js',   //打包后的文件名
        path:path.resolve(__dirname,'/build')  //路径必须是一个绝对路径(__dirname：当前目录下产生的build文件)
                                               // resolve把相对路径解析为绝对路径
    },  //出口
    plugins:[   //数组，放着所有的webpack插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',  //哪个文件作为模板
            filename:'index.html',  //打包后的文件是index.html
            minify:{
                removeAttributeQuotes:true,  //去掉双引号(有的去不掉)
                collapseWhitespace:true  //语句变成一行
            },
            hash:true  //哈希戳
        })
    ],
    module:{ // 模块
        rules:[  //规则  css-loader--帮我们处理css文件，解析@import这种语法的
                 //      style-loader--把css插入到head的标签中
                 //loader的用法1.字符串只能用一个loader,use:'css-loader' 
                 //           2.多个loader使用数组[]，use:['css-loader']
                 //loader的顺序：默认是从右向左,从下到上执行;还可以写成对象形式use:[{loader:'style-loader'}]
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }
}

3. 配置文件每次更新内容后都需要重新启动项目：

npm run dev

4. 发现新建的css文件已被正常引用并正确显示，项目工程无报错。同样的方法还可以处理less、scss等文件

二、 抽离css文件

1. 安装mini-css-extract-plugin

   yarn add mini-css-extract-plugin -D

2. 配置webpack.config.js文件：

// webpack 是node写出来的 node的写法

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin')    //html插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin')  //css插件

module.exports = {
    mode:'development',
    entry:'./src/index.js',  
    output:{
        filename:'bundle.js',   
        path:path.resolve(__dirname,'/build')  
    },  //出口
    plugins:[   //数组，放着所有的webpack插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',  //哪个文件作为模板
            filename:'index.html',  //打包后的文件是index.html
            minify:{
                removeAttributeQuotes:true,  //去掉双引号(有的去不掉)
                collapseWhitespace:true  //语句变成一行
            },
        }),
        new MiniCssExtractPlugin({
             filename:'main.css'
        })
    ],
    module:{ // 模块
        rules:[ 
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
        ]
    }
}

3. 重新启动，npm run dev，生成main.css文件