Saya sudah menderita vertigo karena berbagai webpack konfigurasi dan kasus penggunaan dan menemui jalan buntu. Akhirnya saya membangun aplikasi saya: react.js + express.js.
Sisi server sekarang hanya memproses data formulir yang dikirimkan dan menggunakan nodemailer untuk mengirim email. Dalam waktu dekat akan menyuntikkan data ke html template tergantung rute.
Jadi secara lokal semuanya berfungsi dengan baik, tetapi saya belum menemukan cara menggabungkan sisi klien dan server untuk bundel produksi akhir dengan webpack.
Ini bagian dari packages.json: saya
"main": "src/index.js",
"scripts": {
"start": "start npm run start:client && start npm run start:server",
"start:client": "webpack-dev-server",
"start:server": "node server.js"
},
"proxy": "http://localhost:3000",
Bagian webpack:
module.exports = {
devtool: 'source-map',
devServer: {
historyApiFallback: true,
contentBase: './src',
proxy : {
'/contact': 'http://localhost:3000'
}
},
entry: {
vendor: ['./src/js/plugins.js',
'./src/js/classList.min.js'].map(function(link){
return path.resolve(__dirname, link);
}),
base: ['./src/css/animate.css', './src/css/outdatedbrowser.css'].map(function(link){
return path.resolve(__dirname, link);
}),
entry: ["babel-polyfill", './src/index.js']
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].[chunkhash].js',
publicPath: '/'
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
path.join(__dirname, 'node_modules')
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.[chunkhash].js',
minChunks: Infinity
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
},
output: {
comments: false
}
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
'last 3 version',
'ie >= 10'
]
})
],
context: staticSourcePath
}
}),
new webpack.HashedModuleIdsPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, './public/index.html'),
path: buildPath,
excludeChunks: ['base'],
filename: 'index.html',
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
}
}),
new PreloadWebpackPlugin({
rel: 'preload',
as: 'script',
include: 'all',
fileBlacklist: [/\.(css|map)$/, /base?.+/]
}),
new ExtractTextPlugin({
filename: '[name].[contenthash].css',
allChunks: true
}),
new StyleExtHtmlWebpackPlugin({
minify: true
}),
new webpack.NoEmitOnErrorsPlugin(),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
],
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react', 'stage-1'],
}
},
include: sourcePath
}
]
}
};
Dan struktur file:
dist <folder>
node_modules <folder> ----
public <folder> ----
index.html
src <folder> ----
components <folder>
---css < folder >
---fonts < folder >
---icons < folder >
---img < folder >
---js < folder > - third party JS
---.env
---i18n.js
---index.js
---myDetector.js
---sitemap.xml
server.js
package.json
package-lock.json
webpack.config.js
Adakah yang bisa membantu dengan konfigurasi agar dapat berfungsi?
