本教程总共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
我们之前课程讲的都是开发环境的配置,今天我们来讲下,辛辛苦苦写的代码,如何优雅的打包成生产环境代码?
生产环境代码需要有几个特点:
-
文件体积尽量的小
-
浏览器缓存!如果修改,如何让浏览器重新拉取
-
请求数尽量少
我们带着这几个目的,来配置我们的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文件
图片没有显示?不要慌,这是路径问题,上传到服务器,就应该好了,根据你的路径去自定义!
在这个地方修改
下面我们会讲解,如何自动化发布到服务器上!
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!