Detailed introduction to examples of webpack processing CSS

1. Install the plug-in

##

npm i style-loader css-loader --save-dev
npm i postcss-loader --save-dev
npm i autoprefixer --save-dev
npm install postcss-import --save-dev

The style-loader plug-in is: insert the CSS by injecting the c9ccee2e6ea535a969eb3f532ad9fe89 tag Add to DOM

autoprefixer automatically adds prefix

postcss-import: supports using @import to introduce css

2. Project directory structure:

common.css is:

@import './flex.css';
html,body{
    padding: 0;
    margin: 0;
    background-color: red;
}ul{
    list-style: none;
    margin: 0;
}

flex.css is:

.flex-p{
    display: flex;
}

app.js is:

import  './css/common.css';
import layer from './components/layer/layer.js'const App = function(){
    console.log(layer)
}new App()

##3. webpack The .config.js configuration file is:

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/app.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].js'
    },
    module: {
        loaders: [{
                test: /\.js$/,                
                //以下目录不处理
                exclude: /node_modules/,                
                //只处理以下目录
                include: /src/,
                loader: "babel-loader",                
                //配置的目标运行环境（environment）自动启用需要的 babel 插件                
                query: {
                    presets: ['latest']
                }
            },            //css 处理这一块            
            
            {
                test: /\.css$/,
                use: [                    
                'style-loader',
                    {
                        loader: 'css-loader',
                        options: {                            
                        //支持@important引入css
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function() {                                
                            return [                                    
                            //一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效
                                    require('postcss-import')(),
                                    require("autoprefixer")({                             
               "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
                                    })
                                ]
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html'
        })
    ]
}

4. Execute compilation & view the results

npm run webpack

The above is the detailed content of Detailed introduction to examples of webpack processing CSS. For more information, please follow other related articles on the PHP Chinese website!