带有publicPath的Webpack:'/'不会在spitted块前面添加'/'

时间:2017-03-30 15:34:29

标签: javascript webpack

有人可以帮助我解决我的问题。在其中一个源文件中,我使用代码分割技术 const Home = resolve => require(['./views/Home.vue'], m => resolve(m.default)),问题是除非我将publicPath输出选项设置为'/ js',否则代码拆分省略/和加载时生成的块请求为jsfb5715f933a55e481dbe.2.js,入口点正常工作并请求正确在'/ js /'或'/ css /'没有任何问题。只有代码拆分生成的块才能在公共路径和文件名之间添加“/”。这是我的配置

const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')

const extractScss = new ExtractTextPlugin({
    filename: 'css/[name].css'
})

const sassOpt = {
    sourceMap: true,
    includePaths: [
        path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
        path.resolve(__dirname, 'node_modules/motion-ui/src'),
        path.resolve(__dirname, 'resources/assets/sass'),
        path.resolve(__dirname, 'resources/assets/sass/libs/animate.scss')
    ]
}
module.exports = {
    context: path.resolve(__dirname, 'resources/assets'),
    entry: {
        main: [
            'babel-polyfill',
            'webpack/hot/dev-server',
            // ?reload=true enables full page reload on hmr failure
            'webpack-hot-middleware/client?reload=true',
            './js/app'
        ],
        elastic: [
            './js/lib/elasticsearch-plugin'
        ]
    },

    output: {
        path: path.resolve(__dirname, 'public'),
        filename: '[name].chunk.js',
        chunkFilename: '[chunkhash].[id].js',
        publicPath: '/',
        pathinfo: true
    },
    devtool: 'eval',
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules|vue\/src/,
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015'],
                    plugins: ['lodash']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    esModule: true,
                    loaders: {
                        scss: 'vue-style-loader!css-loader?sourceMap=true!sass-loader?' + JSON.stringify(sassOpt)
                    }
                }
            },
            {
                test: /\.s[a|c]ss$/,
                use: extractScss.extract(['css-loader?sourceMap=true', 'sass-loader?' + JSON.stringify(sassOpt)])
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js', '.vue']
    },
    plugins: [
        extractScss,
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
}

0 个答案:

没有答案