webpack2使用ch7-loader解析css 自動添加瀏覽器前綴

1 目錄結構 

安裝的依賴

"autoprefixer": "^6.7.7",

"css-loader": "^0.28.0",

"postcss-loader": "^1.3.3",
"style-loader": "^0.16.1",

2 webpack.config.js

const webpack = require('webpack'),
      htmlWebpackPlugin = require('html-webpack-plugin'),
      path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name]-[chunkhash].js',
    },
    module: { //loader第三種使用方式 配置項設置 其餘1引入 2cli
      loaders: [
          {   //解析.js
              test: '/\.js$/',  //正則匹配.js文件
              loader: 'babel',  //使用babel 要先安裝 cnpm install --save-dev babel-loader babel-core
              exclude: path.resolve(__dirname, 'node_modules'), //優化babel 排除
              include: path.resolve(__dirname, 'src'),//優化babel 打包範圍
              query: {
                  presets: ['env'] //使用方式之1 cnpm install --save-dev babel-preset-env 告訴babel如何處理
              }
          },
          {   //解析 .css
              test: /\.css$/,
              loader: 'style-loader!css-loader!postcss-loader' //style-loader!css-loader 解析使用
                                                               // css postcss-loader後端瀏覽器優化（加前綴）
                                                               //要先加載 postcss-loader寫在後面
                                                               //?importLoaders=1 css import 'xxx.css'
          }
      ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'body'
        }),
        new webpack.LoaderOptionsPlugin({ //瀏覽器加前綴
            options: {
                postcss: [require('autoprefixer')({browsers:['last 5 versions']})]
            }
        }),
    ]
};

3 app.js

import layer from './components/layer/layer.js';
import './style/common.css';


const  App = function () {
    console.log(layer);
}

new App();

4 common.css

5 打包

6 查看效果