将webpack更新到版本2.1.0-beta.25的问题

时间:2016-10-05 20:13:44

标签: javascript node.js twitter-bootstrap webpack

我遇到了将webpack更新到版本2.1.0-beta.25的问题,我很想得到你的意见,不知道从哪里开始。这可能是一个简单的配置问题,但也许我正在使用的加载器需要更新。

我正在使用bootstrap-loader和sass-loader加载bootstrap sass文件,这会导致错误......

69% building modules 1180/1181 modules 1 active ...ode_modules/bootstrap-loader/no-op.jsTypeError: Path must be a string. Received undefined at assertPath (path.js:8:11) at Object.posix.relative (path.js:495:3) at Object.onRender (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/index.js:282:42) at /home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/node_modules/async/dist/async.js:2231:35 at arrayEach (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/node_modules/async/dist/async.js:1357:13) at Object.<anonymous> (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/node_modules/async/dist/async.js:2223:17) at Object.<anonymous> (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/node_modules/async/dist/async.js:338:31) at Object.callback (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/node_modules/async/dist/async.js:847:20) at options.success (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/node-sass/lib/index.js:309:32)

堆栈跟踪从bootstrap-loader开始,但大多数都来自sass-loader。查看github上发布的类似问题帖子,我尝试了以下操作......

...

        new webpack.LoaderOptionsPlugin({
          options: {
            postcss: [autoprefixer],

            sassLoader: {
              includePaths: [helpers.root('node_modules/bootstrap/scss')]
            },

            context: __dirname,
          }
        })

...

但这并没有为我解决问题。同样,不确定实际问题是bootstrap-loader,sass-loader还是只缺少配置选项。任何反馈都将不胜感激。

webpack.common.js

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const helpers = require('./helpers');
const autoprefixer = require('autoprefixer');
const path = require('path');

module.exports = function(options) {
  return {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },

    resolve: {
        modules: [helpers.root('src'), "node_modules"],
        descriptionFiles: ['package.json'],
        extensions: ['*', '.js', '.ts', '.css', '.scss', '.json', '.html']
    },

    module: {

        rules: [
              {
                  enforce: 'pre',
                  test: /\.js$/,
                  loader: 'source-map-loader',
                  exclude: [helpers.root('node_modules')]
              },

              {
                  test: /\.ts$/,
                  loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                  exclude: [/\.(spec|e2e)\.ts$/]
              },

              {
                  test: /\.html$/,
                  loader: 'raw-loader',
                  exclude: [helpers.root('src/index.html')]
              },

              {
                  test: /\.css$/,
                  loader: 'raw-loader!style-loader!css-loader!postcss-loader'
              },

              {
                  test: /initial\.scss$/,
                  loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader'})
              },

              {
                  test: /\.scss$/,
                  loaders: ['style', 'css', 'sass']
              },

              {
                  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                  loader: "url-loader?limit=10000&mimetype=application/font-woff"
              },

              {
                  test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                  loader: "file-loader"
              },

              {
                  test: /\.json$/,
                  loader: 'json-loader'
              },

              {
                  test: /bootstrap\/dist\/js\/umd\//,
                  loader: 'imports?jQuery=jquery'
              }
        ],

    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            __dirname
        ),

        new ExtractTextPlugin({
            filename: 'css/[name].css',
            disable: false, allChunks: true
        }),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new CopyWebpackPlugin([{
          from: 'src/assets',
          to: 'assets'
        }]),

        new HtmlWebpackPlugin({
            template: 'src/index.html',
            chunksSortMode: 'dependency'
        }),

        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery',
            "window.moment": "moment",
            'Tether': 'tether',
            'window.Tether': 'tether',
            Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
            Alert: "exports?Alert!bootstrap/js/dist/alert",
            Button: "exports?Button!bootstrap/js/dist/button",
            Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
            Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
            Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
            Modal: "exports?Modal!bootstrap/js/dist/modal",
            Popover: "exports?Popover!bootstrap/js/dist/popover",
            Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
            Tab: "exports?Tab!bootstrap/js/dist/tab",
            Util: "exports?Util!bootstrap/js/dist/util"
        }),

        new webpack.LoaderOptionsPlugin({
          options: {
            postcss: [autoprefixer],

            sassLoader: {
              includePaths: [helpers.root('node_modules/bootstrap/scss')]
            },

            context: __dirname,
          }
        })
    ],

    node: {
        global: true,
        crypto: 'empty',
        module: false,
        clearImmediate: false,
        setImmediate: false
    }

  };
}

0 个答案:

没有答案