webpack : AngularJS 1.6.1(ES6) 和 SCSS 打包

Question

有人可以帮我配置 webpack 以满足以下要求

AngularJS (1.6) ES6 到 ES5 的转换
SCSS 到 CSS 编译器
所有 js 到单个包
所有 css 到单个捆绑包
所有文件夹结构应该只用 html 创建（没有 js 文件，因为我们已经捆绑了它）

这是我目前尝试过的方法

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

module.exports = {
    entry: path.resolve(__dirname, './app/app.module.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
        {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&minetype=application/font-woff'
        },
        {
            test: /\.woff2$/,
            loader: 'url?limit=10000&minetype=application/font-woff'
        },
        {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&minetype=application/octet-stream'
        },
        {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'file'
        },
        {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url?limit=10000&minetype=image/svg+xml'
        }
        ]
    },
    plugins: [
        //new ExtractTextPlugin("styles.css"),
    ]
};

Answer 1

更新了 webpack 配置文件

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

module.exports = {
  entry: path.resolve(__dirname, './app/app.module.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015']
      }
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      })
    }, {
      test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
      loader: 'file-loader?name=[name].[ext]&publicPath=../fonts/&outputPath=/assets/fonts/'
    },
            { test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=/assets/images/[name].[ext]' },
    {
      test: /\.(html)$/,
      loader: 'file-loader?name=[path][name].[ext]'
    },
    {
      test: /\.(json)$/,
      loader: 'file-loader?name=[path][name].[ext]'
    },
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract({
        use: [{
          loader: 'css-loader'
        }, {
          loader: 'sass-loader' // compiles Sass to CSS
        }],
        fallback: 'style-loader'
      })
    }
    ]
  },
  plugins: [
    new ExtractTextPlugin('assets/css/styles.css')  
  ]
};

配置了 webpack 的示例项目发布在我的 github

webpack : AngularJS 1.6.1(ES6) 和 SCSS 打包

webpack : AngularJS 1.6.1(ES6) and SCSS packaging

sass

angularjs

ecmascript-6

webpack

angularjs-1.6