웹팩 처리 CSS 예시 상세 소개

1. 플러그인 설치

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

style-loader 플러그인: c9ccee2e6ea535a969eb3f532ad9fe89 태그를 삽입하여 CSS를 DOM에 추가합니다.

autoprefixer가 자동으로

postcss-를 추가합니다. 가져오기: @ import 사용을 지원하여 css

2를 도입합니다. 프로젝트 디렉터리 구조:

common.css:

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

flex.css:

.flex-p{
    display: flex;
}

앱 .js는

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

3입니다. webpack.config.js 구성 파일은

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입니다. 컴파일을 실행하고 결과를 확인하세요

npm run webpack

위 내용은 웹팩 처리 CSS 예시 상세 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!