1、安裝

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

?

2、項目目錄：

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; }

?

3、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引入cssimportLoaders: 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引入cssimportLoaders: 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.jsnew webpack.optimize.CommonsChunkPlugin({//公共塊的塊名稱name: 'common',//生成的文件名filename: 'js/common.js'}),new ExtractTextPlugin('css/[name].css')] }

?

4、執行

npm run webpack

?

5、效果

?

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的webpack css打包为一个css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。