详细介绍webpack处理CSS的实例

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

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

.flex-p{
 display: flex;
}

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

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'
 })
 ]
}

npm run webpack