webpack2 配置 示例

// https://github.com/webpack-contrib/extract-text-webpack-plugin
var webpack = require("webpack");
var path = require('path');
var fs = require('fs');
var argv = require('yargs').argv;

// npm install --registry=https://registry.npm.taobao.org -D
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractSCSS = new ExtractTextPlugin(`[hash].scss.css`);
var extractLESS = new ExtractTextPlugin(`[hash].less.css`);
var adminTemplate = fs.readFileSync('template/admin.html','utf-8');

var css_tag = function(s){
  return `<link rel="stylesheet" type="text/css" href="/static/${s}" />`
}
var js_tag = function(s){
  return `<script type="text/javascript" src="/static/${s}"></script>`
}
var deleteFolderRecursive = function(p) {
  if( fs.existsSync(p) ) {
    fs.readdirSync(p).forEach(function(file,index){
      var curPath = p + "/" + file;
      if(fs.lstatSync(curPath).isDirectory()) { // recurse
        deleteFolderRecursive(curPath);
      } else { // delete file
        fs.unlinkSync(curPath);
      }
    });
    fs.rmdirSync(p);
  }
};

var destfolder = `dist`
var ProgressHook = new webpack.ProgressPlugin(function (percentage, msg) {
    if (percentage==0){
        deleteFolderRecursive(destfolder)
        fs.mkdirSync(destfolder)
    } else if (percentage==1){
        var jslist = []
        var csslist = []
        fs.readdirSync(destfolder).forEach(function(file, index){
          var ext = path.extname(file)
          if (ext == '.css') {
            csslist.push(css_tag(file))
          }else if ( ext == '.js' && file.split('.').length == 2){
            jslist.push(js_tag(file))
          }
        })
        var jsBlock = jslist.join('
');
        var cssBlock = csslist.join('
');
        fs.writeFile(`../html/admin.html`, eval('`'+adminTemplate+'`'));     
    } 
})

module.exports = {
    
    resolve: {
      modules: [
        path.resolve('./css'),
        path.resolve('./js'),
        'node_modules',
      ],
      extensions: [ ".js", ".vue"],
    },
    
    entry: "./entry.js",
    
    output: {
        path: path.resolve('./dist'),
        publicPath: `/static/`, 
        filename:  `[hash].js`, 
    },

  
    module: {
                
        rules: [
            {
              test: /.js$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['env']
                }
              }
            },
            
            {
                test: /.vue$/,
                loader: 'vue',
            },

            { 
                test: /.css$/, 
                use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: "css-loader"
                })
            }, 

            { 
                test: /.scss$/, 
                use: extractSCSS.extract(["css-loader","sass-loader"]),
            }, 

            { 
                test: /.less$/, 
                use: extractLESS.extract(["css-loader","less-loader"]),
            }, 
            
            { 
                test: /.coffee$/, 
                use: "coffee-loader",
            }, 

            // {
            //   test: /.(png|jpg|gif|svg|eot)$/,
            //   loader: 'file-loader',
            //   options: {
            //     name: '[name].[ext]?[hash]'
            //   }
            // },
            
            {test: /.(woff|woff2)(?v=d+.d+.d+)?$/, loader: 'url-loader?limit=100&mimetype=application/font-woff'},
            //{test: /.ttf(?v=d+.d+.d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /.ttf(?v=d+.d+.d+)?$/, loader: 'file-loader'},
            {test: /.eot(?v=d+.d+.d+)?$/, loader: 'file-loader'},
            {test: /.svg(?v=d+.d+.d+)?$/, loader: 'url-loader?limit=100&mimetype=image/svg+xml'},      
        ], 
    },

    plugins: [
        extractLESS,
        extractSCSS,
        ProgressHook,
    ],
};