Home

webpack+less+Autoprefixer

webpack

不同的是，配置结果，是为了，把less > css + 补全浏览器前缀

还有 babel js 语法

postcss.config.js 启动补全前缀

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

webpack.config.js (babel 语法，css，less文件解析补全,合并到一个‘style.css’)

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
       rules: [{
           test: /\.css$/,
           use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [ 'css-loader', 'postcss-loader' ]
            })
       },
       {
          test: /\.less$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use:[ 'css-loader', 'postcss-loader', 'less-loader' ]
          })
       },
       {
         test: /\.js$/,
         exclude: /(node_modules)/,
         use: [{
           loader: 'babel-loader',
           options: {
             presets: [['es2015', {modules: false}]],
             plugins: ['syntax-dynamic-import']
           }
          }]
      }
     ]
   },
    plugins: [
        new ExtractTextPlugin('styles.css')
    ]
};

index.js (写入，导入命令)

import "../css/H5.css";
import "../css/test.less";

参考