所以我最近使用 webpack 1 设置了一个项目，并尝试将它升级到 webpack 2，因为它最近出现了。不幸的是，在使用以下方式捆绑我的 vue 组件时出现以下错误webpack --config webpack.production.config.js --progress：
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"
}
}