ฉันมีอาการเวียนศีรษะจากการกำหนดค่าและกรณีการใช้งาน webpack มากมาย และเข้าสู่ภาวะชะงักงัน ในที่สุดฉันก็สร้างแอปของฉันแล้ว: react.js + express.js
ขณะนี้ฝั่งเซิร์ฟเวอร์เพียงประมวลผลข้อมูลแบบฟอร์มที่ส่งและใช้ nodemailer เพื่อส่งอีเมล ในอนาคตอันใกล้นี้จะมีการแทรกข้อมูลลงในเทมเพลต html ขึ้นอยู่กับเส้นทาง
ดังนั้นทุกอย่างในเครื่องทำงานได้ดี แต่ฉันไม่รู้ว่าจะรวมไคลเอนต์และฝั่งเซิร์ฟเวอร์สำหรับชุดการผลิตขั้นสุดท้ายด้วย webpack ได้อย่างไร
นี่คือส่วนหนึ่งจาก packages.json ของฉัน:
"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",
ส่วน 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
}
]
}
};
และ โครงสร้าง ไฟล์:
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
ใครสามารถช่วยกำหนดค่าเพื่อให้มันทำงานได้?
