webpack css打包爲一個css

一、安裝

npm install extract-text-webpack-plugin --save-dev

 

二、項目目錄：

index文件夾下的index.css：

body{ background-color: #ccc;
} .flex-div{ display: flex;
}

index文件夾下的index2.css：

p{ text-indent: 2em;
}

index文件夾下的index-less.less：

.layer{ width: 600px; height: 200px; background-color: green; > div{ width: 400px; height: 200px; background:url(../../img/ais.jpg);
    } .flex{ display: flex;
    } }

index文件夾下的index.js：

require('./index-less.less'); require('./index.css'); require('./index2.css'); require('../module.js'); console.log('首頁-index文件');

login文件夾下的index.js：

require('./login.css'); require('../module.js'); console.log('登陸頁-index文件');

login文件夾下的login.css：

div{ margin: 0; padding: 0;
}

 

三、webpack.config.js

//處理html模板
var htmlWebpackPlugin = require('html-webpack-plugin'); //處理共用、通用的js
var webpack = require('webpack'); //css單獨打包 var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { // entry: './src/app.js',
 entry: { //通用模塊
        'common': ['./src/page/common/index.js'], 'login': ['./src/page/login/index.js'], 'index': ['./src/page/index/index.js'] }, output: { path: __dirname + '/dist', filename: 'js/[name].js' }, //將外部變量或者模塊加載進來
 externals: { 'jquery': 'window.jQuery' }, module: { loaders: [{ test: /\.js$/, //如下目錄不處理
                exclude: /node_modules/, //只處理如下目錄
                include: /src/, loader: "babel-loader", //配置的目標運行環境（environment）自動啓用須要的 babel 插件
 query: { presets: ['latest'] } }, //css 處理這一塊
 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", 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"] }) ] } } } ] }) }, //less 處理這一塊
 { test: /\.less$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", 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"] }) ] } } }, 'less-loader' ] }) }, //處理html模板
 { test: /\.html$/, use: { loader: 'html-loader' } }, //處理圖片
 { test: /\.(png|jpg|gif|svg)$/i, loaders: [ //小於8k的圖片編譯爲base64，大於10k的圖片使用file-loader 
                    'url-loader?limit=8192&name:img/[name]-[hash:5].[ext]', //圖片壓縮
                    'image-webpack-loader' ] } ] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.html' }), // 獨立通用模塊到js/common.js
        new webpack.optimize.CommonsChunkPlugin({ //公共塊的塊名稱
            name: 'common', //生成的文件名
            filename: 'js/common.js' }), new ExtractTextPlugin('css/[name].css') ] }

 

四、執行

npm run webpack

 

五、效果