我的构建适用于webpack-dev-server,但不适用于dist文件夹

时间:2019-02-02 21:56:17

标签: webpack vuejs2 webpack-dev-server webpack-4 html-webpack-plugin

我可以使用webpack-dev-server很好地构建项目,但是当我在生产环境中构建并输出到目录,然后从文件系统中打开index.html文件时,它不会注册任何vue内容。我已经建立了其他项目的地方工作,所以我几乎可以肯定它与我的配置的一种方式或另做,但我的东西去尝试......

跑出
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
entry: './src/index.ts',
output: {
    path: path.resolve('dist'),
    filename: '[name].js',
},
resolve: {
    extensions: ['.js', '.ts', '.scss'],
    alias: {
        vue$: 'vue/dist/vue.esm.js',
    },
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.js|\.ts$/,
            exclude: /node_modules/,
            use: [
                'babel-loader',
                {
                    loader: 'ts-loader',
                    options: {
                        appendTsSuffixTo: [/\.vue$/],
                    },
                },
            ],
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'style-loader', // creates style nodes from JS strings
                },
                {
                    loader: 'css-loader', // translates CSS into CommonJS
                },
                {
                    loader: 'sass-loader', // compiles Sass to CSS
                },
            ],
        },
    ],
},
plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/index.html',
    }),
],
};

有人知道为什么它不起作用吗?它不会抛出任何警告/错误消息,所以我发现很难进行故障排除。谢谢!

0 个答案:

没有答案