cool hit counter React multi-page application 5_Intefrankly

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、Beijing has new rules for autonomous driving our Fengtai drivers are now safer on the road
2、Big ship gospel Inland sea chaos is saved
3、The same Kirin 970 AI chip why is the Huawei Mate10 so much more expensive than the Honor V10
4、What you dont know about smart contracts
5、Full shutdown whats coming is already coming

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号