[英]Using webpack for copying file if it is on localhost, else minifying
I am new to Webpack. 我是Webpack的新手。
My team is using Golang for the server, and starting to use ReactJS + MobX on the front end. 我的团队正在将Golang用于服务器,并开始在前端使用ReactJS + MobX。 We use Webpack to bundle/transpile all the code into one bundle file per page.
我们使用Webpack将所有代码捆绑/转换为每页一个捆绑文件。 (It is multipage application.)
(是多页应用程序。)
My PM has me looking into moving all this front-end code from static
to a new folder called src
, and to do the following: 我的PM希望我将所有这些前端代码从
static
到名为src
的新文件夹中,并执行以下操作:
setup the environment such that: 设置环境,以便:
Since Golang is running the server and not Webpack (our use case is merely the transpilation at development time), is there way that I can get Webpack to work like this? 由于Golang运行的是服务器而不是Webpack(我们的用例只是开发时的编译),是否有办法让Webpack像这样工作?
NOTE: our entry files are not necessarily on the same level, but have path like static/js/[relative path of one or more levels]/entry.js
注意:我们的条目文件不一定在同一级别,但是具有类似
static/js/[relative path of one or more levels]/entry.js
Use webpack merge you can do that 使用webpack merge你可以做到
Basically you will need 3 file 基本上你需要3个文件
Example: webpack.dev.js 示例:webpack.dev.js
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const webpack = require("webpack");
module.exports = merge(baseConfig, {
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development'),
'BASE_URL': JSON.stringify('http://localhost:5000/')
}
})
],
watch: true
});
webpack.prod.js. webpack.prod.js。 You can see that I'm using some optimization packge in prod mode only like OptimizeCSSAssetsPlugin, CompressionPlugin, UglifyJsPlugin to uglify and gzip the file content to improve performance.
您可以看到我只在Prod模式下使用一些优化包,例如OptimizeCSSAssetsPlugin,CompressionPlugin,UglifyJsPlugin来对文件内容进行uglify和gzip以提高性能。 You can adjust accordingly with your need.
您可以根据需要进行相应调整。
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const webpack = require("webpack");
module.exports = merge(baseConfig, {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions: {
compress: true,
output: null
}
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true,
},
},
})
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
'BASE_URL': JSON.stringify('a/')
}
}),
new CompressionPlugin({
test: /\.(js|css)/
}),
new UglifyJsPlugin(),
]
});
To run it simply use these 2 command in your package.json 要运行它,只需在package.json中使用以下2条命令
"prod": "webpack -p --mode=production --config webpack.prod.js",
"start": "webpack --mode=development --config webpack.dev.js",
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.