react的dist文件放服务器,webpack打包部署react文件夹路径问题

首先我的项目需要放在服务器子目录下如图的Opsystem

bV1cIy?w=149&h=382

打开后会报几个文件夹的路径错误,想请问该如何配置webpack

项目目录:

bV1cGX?w=118&h=135

webpack配置

webpack.common.js:

var webpack = require('webpack');

var CopyWebpackPlugin = require('copy-webpack-plugin');

var HtmlWebpackPlugin = require('html-webpack-plugin');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var path = require('path');

var pkgBower = require('./package.json');

var baseHref = process.env.WP_BASE_HREF ? process.env.WP_BASE_HREF : '/Opsystem';

module.exports = {

entry: {

'vendor': './app/Vendor.jsx',

'app': './app/App.jsx'

},

resolve: {

root: path.join(__dirname, ''),

modulesDirectories: ['node_modules', 'bower_components'],

extensions: ['', '.js', '.jsx']

},

module: {

loaders: [{

test: /jquery\.flot\.resize\.js$/,

loader: 'imports?this=>window'

}, {

test: /\.js/,

loader: 'imports?define=>false'

}, {

test: /\.jsx?$/,

exclude: /(node_modules|bower_components)/,

loaders: ['react-hot']

}, {

test: /\.jsx?$/,

exclude: /(node_modules|bower_components)/,

loader: 'babel',

query: {

presets: ['es2015', 'react'],

compact: false

}

}, {

test: /\.css$/,

exclude: path.join(process.cwd(), '/app'),

loader: ExtractTextPlugin.extract('style', 'css?sourceMap')

}, {

test: /\.css$/,

include: path.join(process.cwd(), '/app'),

loader: 'raw'

}, {

test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,

loader: 'url?prefix=font/&limit=10000'

}, {

test: /\.(png|jpg|gif)$/,

loader: 'url?limit=10000'

}, {

test: /\.scss$/,

loader: 'style!css!sass?outputStyle=expanded'

// loader: 'style!css!rtlcss-loader!sass?outputStyle=expanded' // uncomment for RTL

}]

// , noParse: [/\.min\.js/]

},

resolveLoader: {

alias: {

'rtlcss-loader': path.join(__dirname, 'rtlcss-loader.js')

}

},

devServer: {

outputPath: path.join(__dirname, 'dist')

},

plugins: [

new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor[hash:6].js'),

new HtmlWebpackPlugin({

template: 'app/index.html',

baseUrl: baseHref

}),

new webpack.ResolverPlugin([

// new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('package.json', ['main']),

new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('.bower.json', ['main'])

]),

new CopyWebpackPlugin([{

from: 'img',

to: 'img',

context: path.join(__dirname, 'app')

}, {

from: 'server',

to: 'server',

context: path.join(__dirname, 'app')

}, {

from: 'fonts',

to: 'fonts',

context: path.join(__dirname, 'app')

}]),

new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery',

'window.jQuery': 'jquery'

}),

new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),

new webpack.DefinePlugin({

WP_BASE_HREF: JSON.stringify(baseHref)

})

]

};

webpack.prod.js:

var webpack = require('webpack');

var webpackMerge = require('webpack-merge');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var commonConfig = require('./webpack.common.js');

var path = require('path');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {

// devtool: 'source-map',

output: {

path: path.join(process.cwd(), '/dist/Opsystem'),

publicPath: '/Opsystem/',

filename: '[name].[hash].js'

},

plugins: [

new webpack.NoErrorsPlugin(),

new webpack.optimize.DedupePlugin(),

new webpack.optimize.UglifyJsPlugin({

mangle: {

keep_fnames: true,

except: ['$super']

}

}),

new ExtractTextPlugin('[name].[hash].css'),

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: JSON.stringify('production')

}

})

]

});

错误信息:

bV1cHS?w=1059&h=44

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值