React multi-page application 5
1.React multi-page application 1 (webpack development environment build, including Babel, hot updates, etc.) ----2017.12.28
2.React multi-page application 2 (handling CSS and images, introducing postCSS and image handling etc.) ----2017.12.29
3.React multi-page app 3 (webpack performance improvements, including packaging performance, extracting public packages, etc.) ----2017.12.30
4.React Multi-Page Application 4 (webpack automation to generate multiple entry pages) ----2017.12.31
5. React multi-page application 5(webpackProduction environment configuration, including compressionjs code, Image transcoding, etc.)----2018.01.01
6.React multi-page app 6 (gulp automated publishing to multiple environments, generating version numbers, packaging into zip, etc.) ----2018.01.02
7.React multi-page app 7 (introducing eslint code checking) ----2018.01.03
Development Environment:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
Our previous courses were all about development environment configuration, today we'll talk about how to elegantly package your hard-written code into production code?
The production environment code needs to have several features:
Keep the file size as small as possible
Browser cache! If modified, how to get the browser to pull it again
Minimal number of requests
Let's configure our webpack production environment with these objectives in mind!
First we install the necessary dependencies
npmi-Dhtml-webpack-pluginoptimize-css-assets-webpack-plugin extract-text-webpack-plugin url-loader file
We pack the files into the pc folder in the root directory, but of course you can customize the name of this folder.
constpath =require('path');
constwebpack =require('webpack');
constmerge =require('webpack-merge');
constHtmlWebpackPlugin =require('html-webpack-plugin');
constOptimizeCSSPlugin =require('optimize-css-assets-webpack-plugin');
constExtractTextPlugin =require("extract-text-webpack-plugin");
constbaseWebpackConfig =require("./webpack.base.conf");
constwebpackFile=require('./webpack.file.conf');
constentry =require("./webpack.entry.conf");
constwebpackCom=require("./webpack.com.conf");
letconfig = merge(baseWebpackConfig,{
output: {
path: path.resolve(webpackFile.proDirectory),
filename:'js/[name].[chunkhash:8].js',
chunkFilename:"js/[name]-[id].[chunkhash:8].js",
},
plugins: [
// Setting up the production environment
newwebpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
}
}),
/* common operational public code, vendor introduces third party */
newwebpack.optimize.CommonsChunkPlugin({
name: ["common","vendor"],
}),
/* Prevent vendor hash changes */
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
newwebpack.optimize.CommonsChunkPlugin({
name:'manifest',
chunks: ['vendor']
}),
// extract css into its own file
newExtractTextPlugin('css/[name].[contenthash:8].css'),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
newOptimizeCSSPlugin({
assetNameRegExp:/.css$/g,
cssProcessor:require('cssnano'),
cssProcessorOptions: {
discardComments: {removeAll:true},
// Avoid cssnano recalculating z-index
safe:true
},
canPrint:true
}),
/*compressed js code*/
newwebpack.optimize.UglifyJsPlugin({
output: {
comments:false/*Remove copyright information*/
},
compress: {
warnings:false
}
}),
],
module: {
rules: [
{
test:/.(jsjsx)$/,
loader:'babel-loader',
exclude:/node_modules/,
},
{
test:/.(csspcss)$/,
use: ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader!postcss-loader"
})
},
{
test:/.(pngjpggifttfeotwoffwoff2svg)$/,
loader:'url-loader?limit=8192&name=[name].[hash:8].[ext]&publicPath='+webpackFile.resourcePrefix+'&outputPath='+webpackFile.resource+'/'
},
{
test:/.swf$/,
loader:'file?name=js/[name].[ext]'
}
]
}
});
letpages = entry;
for(letchunkNameinpages) {
letconf = {
filename: chunkName +'.html',
template:'index.html',
inject:true,
title:webpackCom.titleFun(chunkName,pages[chunkName][1]),
minify: {
removeComments:true,
collapseWhitespace:true,
removeAttributeQuotes:true
},
chunks: ['manifest','vendor','common',chunkName],
hash:false,
chunksSortMode:'dependency'
};
config.plugins.push(newHtmlWebpackPlugin(conf));
}
/* Clear pc */
config.plugins.push(webpackFile.cleanFun([webpackFile.proDirectory]));
/* Copy static resources */
webpackFile.copyArr.map(function(data) {
returnconfig.plugins.push(data)
});
module.exports= config;
Modify package.json
"p":"SET BABEL_ENV=production && webpack --progress --colors --config config/webpack/webpack.prod.conf.js",
We run (this p is custom)
npm run p
When the run is over, you get
The files are automatically hashed for browser caching, the hash will change after modification and the browser will retrieve it.
Have you noticed why there's no picture folder?
This is because the size of your Baidu logo image does not exceed 8192, was base64 transcoded, reducing a request.
Of course you could set it up as a sprite chart, but we don't do that.
This is the structure of the files in the folder
We double-click to open the two html files
Everything's fine! Okay!
You can now transfer the files in this folder to your test server!
We will explain below, how to automate the publishing to the server!
end of this article
Reproduction is prohibited, please contact us by leaving a message in the public website if you want to reproduce it!
Thanks to the kids for their support!
If you have any questions, you can leave us a comment below!
Recommended>>
1、科学复兴AI生万物
2、2018值得尝试的无参数全局优化新算法所有测试取得最优结果
3、The water information platform is all set all thats missing is you
4、Polygon stable box monthly card 25
5、Tencent looks to see if the 3D sound gaming experience can be upgraded again