React多页面应用7(webpack4 生产环境配置)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04

2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08

3、React多页面应用3(webpack4 多页面实现)---2018.04.09

4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10

5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11

6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12

7、React多页面应用7(webpack4 生产环境配置)---2018.04.13

8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16

9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

我们之前课程讲的都是开发环境的配置,今天我们来讲下,辛辛苦苦写的代码,如何优雅的打包成生产环境代码?

生产环境代码需要有几个特点:

1. 文件体积尽量的小

2. 浏览器缓存!如果修改,如何让浏览器重新拉取

3. 请求数尽量少

我们带着这几个目的,来配置我们的webpack生产环境!

1、首先我们安装必要的依赖

npm i -D html-webpack-plugin@3.1.0 optimize-css-assets-webpack-plugin@4.0.0 extract-text-webpack-plugin@4.0.0-beta.0 file@0.2.2 clean-webpack-plugin@0.1.19 copy-webpack-plugin@4.5.1

2、新建 webpack.prod.conf.js

完整代码

const path = require('path');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const baseWebpackConfig = require("./webpack.base.conf");
const webpackFile = require('./webpack.file.conf');
const entry = require("./webpack.entry.conf");
const webpackCom = require("./webpack.com.conf");

let config = merge(baseWebpackConfig, {
/*设置生产环境*/
    mode: 'production',
    output: {
path: path.resolve(webpackFile.proDirectory),
        filename: 'js/[name].[chunkhash:8].js',
        chunkFilename: "js/[name]-[id].[chunkhash:8].js",
    },
    optimization: {
//包清单
        runtimeChunk: {
name: "manifest"
        },
        //拆分公共包
        splitChunks: {
cacheGroups: {
//项目公共组件
                common: {
chunks: "initial",
                    name: "common",
                    minChunks: 2,
                    maxInitialRequests: 5,
                    minSize: 0
                },
                //第三方组件
                vendor: {
test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    },
    plugins: [
// extract css into its own file
        new ExtractTextPlugin('css/[name].[md5:contenthash:hex:8].css'),
        // Compress extracted CSS. We are using this plugin so that possible
        // duplicated CSS from different components can be deduped.
        new OptimizeCSSPlugin({
assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: {
discardComments: {removeAll: true},
                // 避免 cssnano 重新计算 z-index
                safe: true
            },
            canPrint: true
        }),
    ],
    module: {
rules: [
            {
test: /\.(js|jsx)$/,
                use: [
'babel-loader',
                ],
            },
            {
test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
test: /\.(css|pcss)$/,
                use: ExtractTextPlugin.extract({
fallback: "style-loader",
                    use: "css-loader!postcss-loader"
                })
            },
            {
test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
                loader: 'url-loader?limit=8192&name=[name].[hash:8].[ext]&publicPath=' + webpackFile.resourcePrefix + '&outputPath=' + webpackFile.resource + '/'
            },
            {
test: /\.swf$/,
                loader: 'file?name=js/[name].[ext]'
            }
        ]
    }
});
let pages = entry;
for (let chunkName in pages) {
let conf = {
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(new HtmlWebpackPlugin(conf));
}
/* 清除 dist */

config.plugins.push(new CleanWebpackPlugin([webpackFile.proDirectory], {root: path.resolve(__dirname, '../../'), verbose: true, dry: false}));

let copyObj = [
/*    {from: './app/public/plugin', to: './plugin'},//一些不需要走webpack的插件
    {from: './app/public/versionTips', to: './versionTips'},//固定不变的浏览器版本提示文件
    {from: './app/public/file', to: './resource'},//一些固定的文件，如下载文件*/
    {from: './app/public/img/favicon.ico', to: './'},//网站favicon.ico
];

let copyArr = [];
copyObj.map((data) => {
    copyArr.push(
new CopyWebpackPlugin([{from: data.from, to: data.to, ignore: ['.*']}])
    )
});

/* 拷贝静态资源  */
copyArr.map(function (data) {
return config.plugins.push(data)
});


module.exports = config;

修改下 webpack.file.conf.js

module.exports = {
devDirectory: 'devBuild', /*开发目录*/
    proDirectory: 'dist', /*发布目录*/
    resource: 'resource', /*静态资源*/
    resourcePrefix: 'resource', /*静态资源前缀*/
};

其他的 跟webpack3 有一些区别

其中

图片大小超过8192,会被base64转码,减少了一次请求.

3、修改package.json

"p": "SET BABEL_ENV=production && webpack --progress --colors --config config/webpack/webpack.prod.conf.js",

4、执行命令

npm run p

文件都自动加上了 hash值,便于浏览器缓存,修改后这个hash会变,浏览器会重新获取.

我们打开文件夹

分别用浏览器打开这几个html文件

图片没有显示？不要慌，这是路径问题，上传到服务器，就应该好了，根据你的路径去自定义！

在这个地方修改

下面我们会讲解,如何自动化发布到服务器上!

本文完 

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!

React多页面应用7(webpack4 生产环境配置)-留客客-获客营销saas系统