React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28
2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29
3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30
4.React多页面应用4(webpack自动化生成多入口页面)----2017.12.31
5.React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)----2018.01.01
6.React多页面应用6(gulp自动化发布到多个环境,生成版本号,打包成zip等)----2018.01.02
7.React多页面应用7(引入eslint代码检查)----2018.01.03
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
我们之前课程讲的都是开发环境的配置,今天我们来讲下,辛辛苦苦写的代码,如何优雅的打包成生产环境代码?
生产环境代码需要有几个特点:
文件体积尽量的小
浏览器缓存!如果修改,如何让浏览器重新拉取
请求数尽量少
我们带着这几个目的,来配置我们的webpack生产环境!
首先我们安装必要的依赖
npm i -D html-webpack-plugin optimize-css-assets-webpack-plugin extract-text-webpack-plugin url-loader file
新建 webpack.prod.conf.js
我们把文件打包到 根目录下 pc文件夹下,当然 你可以自定义这个文件夹名称
const path = require('path'); const webpack = require('webpack'); const merge = require('webpack-merge'); const HtmlWebpackPlugin = require('html-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, {output: {path: path.resolve(webpackFile.proDirectory), filename: 'js/[name].[chunkhash:8].js', chunkFilename: "js/[name]-[id].[chunkhash:8].js", }, plugins: [// 设置生产环境 new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production'), }}), /* common 业务公共代码,vendor引入第三方 */ new webpack.optimize.CommonsChunkPlugin({name: ["common", "vendor"], }), /* 防止 vendor hash 变化 */ // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({name: 'manifest', chunks: ['vendor']}), // extract css into its own file new ExtractTextPlugin('css/[name].[contenthash: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 }), /*压缩js代码*/ new webpack.optimize.UglifyJsPlugin({output: {comments: false/*删除版权信息*/ }, compress: {warnings: false }}), ], module: {rules: [{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)); } /* 清除 pc */ config.plugins.push(webpackFile.cleanFun([webpackFile.proDirectory])); /* 拷贝静态资源 */ webpackFile.copyArr.map(function (data) {return config.plugins.push(data) }); module.exports = config;
修改 package.json
"p": "SET BABEL_ENV=production && webpack --progress --colors --config config/webpack/webpack.prod.conf.js",
我们运行(这个p 是自定义的)
npm run p
运行结束后得到
文件都自动加上了 hash值,便于浏览器缓存,修改后这个hash会变,浏览器会重新获取.
大家发现没有 为什么没有 图片文件夹?
这是因为你的那张百度logo图片大小没有超过8192,被base64转码了,减少了一次请求.
当然你可以设置成精灵图,但是我们没有那么做.
这是文件夹里的文件结构
我们双击打开这两个html文件
一切正常! ok !
你可以把这个文件夹里的文件传到你的测试服务器上了!
下面我们会讲解,如何自动化发布到服务器上!
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
来源:React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)-留客客-获客营销saas系统
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)相关推荐
- 记一次node+react项目发布过程(一)--webpack生产环境打包优化
先附上项目效果: 项目地址: http://47.105.144.204/index github: github.com/dsying/reac- 未优化之前 webpack配置文件 const p ...
- Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体(Font)文件,devsever,生产环境配置以及css的兼容写法
目录 一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件 二.打包 ...
- React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
- 在Ubuntu 14.04上设置生产环境可用的Node.js
在Ubuntu 14.04上设置生产环境可用的Node.js 提供:ZStack社区 前言 Node.js是一个开源的JavaScript运行时环境,开发者可以用它方便的构建服务器端应用和网络应用.N ...
- vue3.0生产环境和正式环境配置_vue开发环境和生产环境配置
开发环境配置 一般情况下开发环境是会跨域的,所以我们只需要在跨域的位置配置即可.进入config/index.js,在proxyTable对象里面添加代码,如下: '/api': { target: ...
- Vue.config.js开发环境与生产环境配置
Vue.config.js开发环境与生产环境配置 首先在项目根目录创建 .env.development 开发环境 .env.production 生产环境 VUE_APP_SERVICE_URL V ...
- webpack抽离css,压缩css代码 和 js代码
前言 在实际生产环境中,较少使用style-loader,css代码被打包到了 main.js里面,这时候就需要对css代码进行抽离优化. module.exports = {module:{rule ...
- 配置React的Babel 6和Webpack 2环境
Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架React.这个框架最大的有点就在于让UI的开发都基于组件,这样View都是根据props和state变化的. 项目地址:https:/ ...
- Webpack 生产环境性能优化之externals
前言 在实际开发中,我们可能会引入一些第三方库,比如说 elementUI.但是在项目打包的时候,webpack会将main.js 中引入的第三方代码进行打包,为了减小js代码的体积,我们又不希望把它 ...
最新文章
- python扩展库安装
- vue状态管理存取数据_vue状态管理vuex从浅入深详细讲解
- Kotlin 与 Java有什么区别(最全最新的)
- JSP由浅入深(3)—— 通过表达式增加动态内容
- Golang map 如何进行删除操作?
- 微软笔试题(看到的写答案啊)
- 常用的python测试脚本_详解Python的单元测试
- 关于she'll脚本中echo -e使用sh命令执会显示参数-e-的问题
- Cuda beginning
- shell脚本导出oracle数据库,Shell脚本备份恢复Oracle数据库简单示例
- 微软Power BI 每月功能更新系列——3月Power BI 新功能学习
- 【转】C#字符串转换为日期
- 【Unity3D】UGUI之Dropdown
- Java计算机毕业设计电费管理系统源码+系统+数据库+lw文档
- java openxml word_使用OpenXML操作Office文档
- win7虚拟机_win7系统如何安装virtual pc虚拟机 安装virtual pc虚拟机方法【介绍】
- 软考常考的四种设计模式
- 简洁大气的资源网站emlog模板
- 磁珠和电感有什么区别_电感和磁珠的作用
- 【Nginx】关于二级域名配置https
热门文章
- 2021固原一中高考成绩查询,2021年固原市高考理科状元名单揭晓,今年固原市高考理科状元...
- 我获了诺贝尔奖,却治不好你的癌症
- 解决 ImportError: No module named 'serial' 问题
- NIH发布包含10600张CT图像数据库 为AI算法测试铺路
- 还没体验过无人超市?手把手教你用计算机识别技术自己开一家!
- 邮政快递与物流行业舆情监测系统方案
- python microbit typeerror_Microbit python无效语法
- (十八)【模电】(放大电路中的反馈)交流负反馈对放大电路性能的影响
- 数列极限定义的具体解释(举例)--十分易懂
- 2020年11月14日