我正在尝试从使用webpack2更新我的应用程序，以现在使用新版本的webpack4和teh vue-loader 15，该过程很顺利，但是现在我在尝试生成捆绑包时遇到了一个问题
我正在运行下一个错误
npm run dev
获取下一个堆栈跟踪
ERROR in ./node_modules/vue-datepicker-local/src/VueDatepickerLocal.vue
1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <template>
| <div class="datepicker" :class="{'datepicker-
range':range,'datepicker__clearable':clearable&&text&&!disabled}">
| <input readonly :value="text" :class="[show ? 'focus' : '',
inputClass]" :disabled="disabled" :placeholder="placeholder"
:name="name" v-if="type!=='inline'"/>
@ ./node_modules/vue-datepicker-local/src/index.js 1:0-48 3:16-25 3:32-
41 5:0-9 9:15-24
@ ./src/main/resources/static/app/js/sample/sample.js
@ multi
./src/main/resources/static/app/js/scheduler/sample.js
我正在使用下一个package.json
{
"name": "sample",
"version": "1.0.0",
"main": "./src/main/resources/static/js/main.js",
"scripts": {
"build": "cross-env NODE_ENV=production webpack --display-error-details",
"dev": "cross-env NODE_ENV=development webpack --progress --display-error-details ",
"dev-watch": "cross-env NODE_ENV=development webpack-dev-server",
"dev-watch-scheduler": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack.config.dev.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"unit-watch": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "MIT",
"dependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.4.3",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/runtime": "^7.4.3",
"@vue/cli": "^3.6.3",
"babel-eslint": "10.0.1",
"babel-loader": "^8.0.5",
"cross-env": "^5.1.4",
"css-loader": "^2.1.1",
"es6-promise": "^4.2.6",
"eslint": "^5.16.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-vue": "^5.2.2",
"file-loader": "^3.0.1",
"isomorphic-fetch": "^2.2.1",
"less-loader": "^4.1.0",
"lodash": "^4.17.5",
"moment": "^2.21.0",
"moment-timezone": "^0.5.25",
"node-sass": "^4.9.3",
"postcss": "^7.0.2",
"postcss-loader": "^3.0.0",
"query-string": "^6.4.2",
"sass-loader": "^7.1.0",
"spin.js": "^4.0.0",
"style-loader": "^0.23.1",
"svgxuse": "^1.2.6",
"v-tooltip": "^2.0.1",
"vue": "^2.6.10",
"vue-datepicker-local": "^1.0.12",
"vue-resource": "^1.5.0",
"vue-router": "^3.0.6",
"vue-star-rating": "^1.6.1",
"vue-style-loader": "^4.1.2",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.1",
"worker": "^0.3.12"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@symfony/webpack-encore": "^0.27.0",
"autoprefixer": "^9.5.1",
"axios": "^0.18.0",
"axios-mock-adapter": "^1.14.1",
"babel-plugin-dynamic-import-node": "^2.2.0",
"chai": "^4.1.2",
"cssnano": "^4.1.10",
"express": "^4.16.2",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.4.0",
"karma": "^4.1.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^2.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^3.0.5",
"mini-css-extract-plugin": "^0.6.0",
"mocha": "^6.1.4",
"raw-loader": "^2.0.0",
"sinon": "^7.3.2",
"sinon-chai": "^3.3.0",
"uglifyjs-webpack-plugin": "^2.1.2",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1",
"webpack-manifest-plugin": "^2.0.4"
}
}
和下一个wepack.config.js
const path = require('path');
const webpack = require('webpack');
const ManifestPlugin = require('webpack-manifest-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const cssnano = require('cssnano');
function resolve(dir) {
return path.join(__dirname, dir);
}
// Get appropriate environment.
const env = !process.env.NODE_ENV ? 'prod' : process.env.NODE_ENV;
const projectPath = process.cwd();
const miniCSSExtract = new MiniCssExtractPlugin({
filename: env === 'dev' ? '[name].bundle.css' : '[name].bundle-[contenthash].css',
});
module.exports = {
entry: {
'app/js/sample-dev': ['@babel/polyfill', './src/main/resources/static/app/js/app/sample.js'],
},
output: {
filename: '[name].js',
path: `${__dirname}/target/classes/static/`,
},
mode: env === 'prod' ? 'production' : 'development',
resolve: {
aliasFields: ['browser'],
alias: {
vue$: 'vue/dist/vue.esm.js',
},
extensions: [
'.js',
'.json',
'.vue',
'.scss',
'.css',
],
},
devtool: env === 'dev'
? '#eval-source-map' /* internal, cheap, fast */
: 'source-map' /* external */,
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'eslint-loader',
},
{
test: /\.mjs$/,
type: 'javascript/auto',
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true,
},
},
],
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
],
},
{
test: /\.vue$/,
exclude: [/node_modules/],
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: [/node_modules/],
},
{
test: /\.(svg)(\?.*)?$/,
loader: 'raw-loader',
include: resolve('./src/main/resources/static/components/imgs'),
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
exclude: resolve('./src/main/resources/static/components/imgs'),
options: {
name: '[name].[ext]?[hash]',
},
},
],
},
node: {
fs: 'empty',
},
};
if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
},
}),
new ManifestPlugin(
{
fileName: 'outfitting/manifest.json',
},
),
new VueLoaderPlugin(),
miniCSSExtract,
]);
}
if (process.env.NODE_ENV === 'production') {
// module.exports.devtool = '#source-map';
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: env === 'prod' ? '"production"' : '""',
},
}),
// new VueLoaderPlugin(),
new UglifyJsPlugin({
sourceMap: env === 'prod',
uglifyOptions: {
compress: env === 'prod',
},
}),
new VueLoaderPlugin(),
miniCSSExtract,
new webpack.LoaderOptionsPlugin({
minimize: true,
}),
new ManifestPlugin(
{
fileName: 'outfitting/manifest.json',
},
),
]);
}
以及在我的sample.js文件中：
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import VueDatepickerLocal from 'vue-datepicker-local';
import store from './store';
import tooltip from './tooltip.vue';
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(VueDatepickerLocal);
Vue.component('tooltip', tooltip);
const routes = [
{ path: '/app/sample/', component: () => import('./sampleForm.vue') },
];
const router = new VueRouter({
routes,
mode: 'history',
});
new Vue({
el: '#app',
beforeCreate() {
this.$store.commit('initialize');
},
render: h => h(app),
router,
store,
}).$mount('#app');
不确定发生了什么，我还无法创建捆绑文件，我尝试了不同的加载程序，但均未成功