Webpack 5 入口点现在导入失败

Question

我将我的项目从 webpack 4 升级到 5。该项目使用“webpack serve”运行，但我在入口点文件中收到错误“SyntaxError: Cannot use import statement outside a module”。这曾经在 webpack 4 中工作。不确定为什么在尝试调查后现在失败了。

我可能遗漏了什么？我尝试在包 json 中设置类型：模块，但这在 webpack.config.js

中引起了更多问题

我的 webpack 文件和入口点是这样的：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js',
    },
    devtool: 'inline-source-map',
    devServer: {
        port: 9001,
    },
    resolve: {
        extensions: ['.js', '.vue', '.json', '.scss'],
        alias: {}
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i, 
                loader: "file-loader"
            }
        ]
    },
    mode: "development",
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management',
            template: 'src/index.html'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/'
    }
};

入口点：

'use strict';
import Vue from 'vue';
import App from './App';
import Vuex from 'vuex';

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {},
    mutations: {},
    getters: {},
    modules: {}
});

new Vue({
    el: '#app',
    components: { App },
    store,
    render: function(createElement) {
        return createElement(App);
    }
});

export default store;

和包裹JSON

{
    "name": "web",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "dependencies": {
        "css-hot-loader": "^1.4.2",
        "extract-text-webpack-plugin": "^3.0.2",
        "vuex": "^3.1.0"
    },
    "devDependencies": {
        "clean-webpack-plugin": "^0.1.19",
        "css-loader": "^1.0.0",
        "file-loader": "^2.0.0",
        "html-webpack-harddisk-plugin": "^0.2.0",
        "html-webpack-plugin": "^5.3.2",
        "less": "^3.9.0",
        "less-loader": "^4.1.0",
        "lodash": "^4.17.11",
        "lodash-es": "^4.17.11",
        "sass": "^1.42.1",
        "sass-loader": "^10.1.1",
        "style-loader": "^0.23.0",
        "vue": "^2.5.17",
        "vue-loader": "^14.2.3",
        "vue-template-compiler": "^2.5.17",
        "webpack": "^5.56.0",
        "webpack-cli": "^4.8.0",
        "webpack-dev-server": "^4.3.0"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
        "watch": "webpack --watch",
        "build": "webpack --display-error-details"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/JordanKlaers/cssChallenges.git"
    },
    "author": "",
    "license": "ISC"
}

Answer 1

问题

我检查了您的配置，发现问题是将 .vue 文件 (App.vue) 导入您的 js 文件（index.js 入口点） .

解决方案

在这种情况下，基本上您需要 babel-loader 来处理转换 js 文件。只需同时安装 babel 和 babel-loader:

npm i -D babel-loader @babel/core @babel/preset-env

然后将加载程序添加到您的 webpack.config.js:

{
    // ...
    module: {
    rules: [
        {
            test: /\.js$/,
            use: {
              loader: "babel-loader",
            },
        },
        // ...
    }
}

就是这样，但请记住，您忘记将 Vue 包含在入口点中并且 store 尚未定义：

// add this
import Vue from "vue";

// `store` isn't defined

Webpack 5 入口点现在导入失败

Webpack 5 entry point now failing on imports

module

webpack

webpack-5

问题

解决方案