Question

所以我最近使用webpack 1设置了一个项目，并尝试将其升级到webpack 2，因为它最近出现了。不幸的是，使用webpack --config webpack.production.config.js --progress捆绑我的vue组件时出现以下错误：

ERROR in ./site/templates/scripts/src/components/card/ribbon.vue
Module build failed: TypeError: loader.charAt is not a function
at ensureBang (/Users/pascal/Projects/xxx/repo/node_modules/vue-loader/lib/loader.js:180:16)
at getLoaderString (/Users/pascal/Projects/xxx/repo/node_modules/vue-loader/lib/loader.js:145:18)
at getRequireString (/Users/pascal/Projects/xxx/repo/node_modules/vue-loader/lib/loader.js:80:7)
at getRequire (/Users/pascal/Projects/xxx/repo/node_modules/vue-loader/lib/loader.js:71:7)
at /Users/pascal/Projects/xxx/repo/node_modules/vue-loader/lib/loader.js:205:11
at Array.forEach (native)

这就是我的webpack.production.config.js的样子：

const webpack = require("webpack");
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
const AppCachePlugin = require("appcache-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './site/templates/scripts/src/app.ts',
    output: {
        filename: 'app.js',
        path: `${__dirname}/site/templates/scripts/dist`
    },

    resolve: {
        alias: {
            vue$: path.resolve(__dirname, '/node_modules/vue/dist/vue.common.js')
        },
        extensions: ['.vue', '.css', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use:  ["style-loader", "css-loader"]
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader',
                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
                        css: ExtractTextPlugin.extract('css'),
                        js: 'babel-loader',
                    }
                }
            },
            {test: /\.tsx?$/, loader: "awesome-typescript-loader"},
            {test: /\.js$/, enforce: "pre", loader: "source-map-loader"}
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new CleanWebpackPlugin([
                'site/templates/scripts/dist/',
                'site/templates/styles/dist/'], {
                "verbose": true,
                "dry": true
            }
        ),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),

        new ExtractTextPlugin({
            filename: "../../styles/dist/bundle.css",
            allChunks: true,
            disable: false
        }),
        new CommonsChunkPlugin({
            name: "commons",
            filename: "commons.js",
            minChunks: 2
        }),


        new UglifyJsPlugin({
            compress: {
                warnings: false
            },
        }),

        new AppCachePlugin({
            output: "../../../../xxx.appcache",
            network: null,
            fallback: ['site/assets/images/status/offline.png'],
            settings: ['prefer-online']
        }),

    ],

    externals: {
        "jquery": "$",
        "fetch": "fetch"
    }
};

引发此错误的vue组件如下所示：

<template>
    <div class="ribbon"></div>
</template>

<script>
    export default {
        data () {
            return {}
        }
    }
</script>

<style scoped>

</style>

因为它几乎是一个空组件，我认为错误与vue-loader有关（可能与webpack2不兼容？）。

我查看了几个github问题，但似乎没有任何与我得到的错误有关。

这是我的package.json：

{
  "name": "xxx",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://bitbucket.org/xxx/xxx",
  "author": "xxx <xxx@xxx.com>",
  "license": "MIT",
  "scripts": {
    "scss:dev": "./node_modules/.bin/node-sass --include-path node_modules/ --watch --recursive  --source-map true -o site/templates/styles/dist --source-comments site/templates/styles/src/",
    "scss:prod": "./node_modules/.bin/node-sass --include-path node_modules/ site/templates/styles/src/main.scss site/templates/styles/dist/main.css && ./node_modules/.bin/cssnano < site/templates/styles/dist/main.css > site/templates/styles/dist/main.min.css && ./node_modules/.bin/cssnano < site/templates/styles/dist/bundle.css > site/templates/styles/dist/bundle.min.css",
    "webpack:dev": "webpack --watch --progress",
    "webpack:prod": "webpack --config webpack.production.config.js --progress",
    "build:prod": "yarn run webpack:prod && yarn run scss:prod"
  },
  "devDependencies": {
    "@types/jquery": "^2.0.39",
    "appcache-webpack-plugin": "^1.3.0",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-es2016": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "babel-runtime": "^6.22.0",
    "clean-webpack-plugin": "^0.1.15",
    "compression-webpack-plugin": "^0.3.2",
    "css-loader": "^0.26.1",
    "cssnano-cli": "^1.0.5",
    "extract-text-webpack-plugin": "beta",
    "node-sass": "^4.3.0",
    "offline-plugin": "^4.5.5",
    "sass-loader": "^4.1.1",
    "source-map-loader": "^0.1.6",
    "style-loader": "^0.13.1",
    "tslint": "^4.3.1",
    "tslint-microsoft-contrib": "^4.0.0",
    "typescript": "^2.1.5",
    "typings": "^2.1.0",
    "uglifyjs-webpack-plugin": "^0.1.2",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^10.0.3",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.2.1",
    "webpack-combine-loaders": "^2.0.3"
  },
  "dependencies": {
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.1",
    "vue": "^2.1.10",
    "whatwg-fetch": "^2.0.2"
  }
}

Answer 1

原来这个错误与vue-loader没有正确更新有关。我删除了package.json中的vue-loader条目并运行：

yarn add vue-loader --dev

现在一切似乎都有效。

Old vue-loader：^ 10.0.3
新的vue-loader：^ 10.2.3

截至2017年2月。

Answer 2

extract-text-webpack-plugin 2.0.0-rc.3有一些重大更改，vue-loader 8.6.1不支持它。

请参阅https://github.com/vuejs/vue-loader/issues/624和https://github.com/vuejs/vue-loader/pull/626

webpack2和vue-loader - 类型错误（loader.charAt不是函数）

2 个答案: