webpack：AngularJS 1.6.1(ES6) 和 SCSS 打包答案

【问题标题】：webpack : AngularJS 1.6.1(ES6) and SCSS packagingwebpack：AngularJS 1.6.1(ES6) 和 SCSS 打包
【发布时间】：2017-02-03 10:59:18
【问题描述】：

有人可以帮我配置 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"),
    ]
};

【问题讨论】：

标签： angularjs sass webpack ecmascript-6 angularjs-1.6

【解决方案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

【讨论】：