webpack4 + react 搭建多页面应用示例
webpack升级到4之后还没好好的同步一个可实用的webpack架子,接下来用webpack4来搭建一个简单的react的多界面应用,废话不说直接撸码
创建工程
$mkdirdemo&&cddemo $npminit-y
webpack配置
安装react+babel依赖
$npmi-Sreact@16.3.0react-dom@16.3.0 $npmi-Dwebpack@4.4.1webpack-cli@2.0.13webpack-dev-server@3.1.1webpack-merge@4.1.2babel-cli@6.26.0babel-preset-env@1.6.1babel-preset-react@6.24.1babel-preset-react-hmre@1.1.1babel-loader@7.1.4file-loader@1.1.11url-loader@1.0.1
webpack.base.conf.js(config->webpack)
constentry=require("./webpack.entry.conf"); constnewEntry={}; for(letnameinentry){ newEntry[name]=entry[name][0] } letconfig={ entry:newEntry, resolve:{ extensions:[".js",".json",".jsx",".css",".pcss"], } }; module.exports=config;
webpack.dev.conf.js
constwebpack=require('webpack');//引入webpack constopn=require('opn');//打开浏览器 constmerge=require('webpack-merge');//webpack配置文件合并 constpath=require("path"); constbaseWebpackConfig=require("./webpack.base.conf");//基础配置 constwebpackFile=require("./webpack.file.conf");//一些路径配置 consteslintFormatter=require('react-dev-utils/eslintFormatter'); letconfig=merge(baseWebpackConfig,{ /*设置开发环境*/ mode:'development', output:{ path:path.resolve(webpackFile.devDirectory), filename:'js/[name].js', chunkFilename:"js/[name].js", publicPath:'' }, 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:[ /*设置热更新*/ newwebpack.HotModuleReplacementPlugin(), ], module:{ rules:[ { test:/\.(js|jsx)$/, use:[ 'babel-loader', 'cache-loader', ], include:[ path.resolve(__dirname,"../../app"), path.resolve(__dirname,"../../entryBuild") ], exclude:[ path.resolve(__dirname,"../../node_modules") ], }, { test:/\.(css|pcss)$/, loader:'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap', exclude:/node_modules/ }, { test:/\.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/, loader:'file-loader?name=[name].[ext]&outputPath='+webpackFile.resource+'/' }, { test:/\.(js|jsx)$/, enforce:'pre', use:[ { options:{ formatter:eslintFormatter, eslintPath:require.resolve('eslint'), //@remove-on-eject-begin baseConfig:{ extends:[require.resolve('eslint-config-react-app')], }, //ignore:false, useEslintrc:false, //@remove-on-eject-end }, loader:require.resolve('eslint-loader'), }, ], include:[ path.resolve(__dirname,"../../app") ], exclude:[ path.resolve(__dirname,"../../node_modules") ], } ] }, /*设置api转发*/ devServer:{ host:'0.0.0.0', port:8080, hot:true, inline:true, contentBase:path.resolve(webpackFile.devDirectory), historyApiFallback:true, disableHostCheck:true, proxy:[ { context:['/api/**','/u/**'], target:'http://10.8.200.69:8080/', secure:false } ], /*打开浏览器并打开本项目网址*/ after(){ opn('http://localhost:'+this.port); } } }); module.exports=config;
webpack.prod.conf.js
constpath=require('path'); constmerge=require('webpack-merge'); constHtmlWebpackPlugin=require('html-webpack-plugin'); constCopyWebpackPlugin=require('copy-webpack-plugin'); constCleanWebpackPlugin=require('clean-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,{ /*设置生产环境*/ 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:[ //extractcssintoitsownfile newExtractTextPlugin('css/[name].[md5:contenthash:hex:8].css'), //CompressextractedCSS.Weareusingthispluginsothatpossible //duplicatedCSSfromdifferentcomponentscanbededuped. newOptimizeCSSPlugin({ 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]' } ] } }); 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)); } /*清除dist*/ config.plugins.push(newCleanWebpackPlugin([webpackFile.proDirectory],{root:path.resolve(__dirname,'../../'),verbose:true,dry:false})); /*拷贝静态资源*/ copyArr.map(function(data){ returnconfig.plugins.push(data) }); module.exports=config;
构建多界面
整体架构搭建起来之后
app->component
$mkdirdemo&&cddemo $touchIndex.jsx importReactfrom'react'; classIndexextendsReact.Component{ render(){ return(写个demo
在config->entry
module.exports=[ { name:'index', path:'index/Index.jsx', title:'首页', keywords:'首页', description:'首页' }, { name:'demo', path:'demo/Index.jsx', title:'demo', keywords:'demo', description:'demo' }, { name:'demo1', path:'demo1/Index.jsx', title:'demo1', keywords:'demo1', description:'demo1' } ];
然后直接执行npmruncreate-dev就会在devBuild和entryBuild中添加一个新的demo.html和demo.js
package.json { "name":"webpack_es6", "version":"1.0.0", "description":"", "main":"index.js", "scripts":{ "dev":"webpack-dev-server--devtooleval--progress--colors--profile--configconfig/webpack/webpack.dev.conf.js", "entry":"nodeconfig/entry/entryBuild.js", "devBuildHtml":"nodeconfig/webpack/webpack.devBuildHtml.conf.js", "create-dev":"npmrunentry&&npmrundevBuildHtml", "build":"BABEL_ENV=production&&webpack--progress--colors--configconfig/webpack/webpack.prod.conf.js", "test":"echo\"Error:notestspecified\"&&exit1" }, "keywords":[], "author":"", "license":"ISC", "dependencies":{ "react":"^16.3.0", "react-dom":"^16.3.0" }, "devDependencies":{ "babel-cli":"^6.26.0", "babel-eslint":"^8.2.2", "babel-loader":"^7.1.4", "babel-preset-env":"^1.6.1", "babel-preset-react":"^6.24.1", "babel-preset-react-hmre":"^1.1.1", "cache-loader":"^1.2.2", "clean-webpack-plugin":"^0.1.19", "copy-webpack-plugin":"^4.5.1", "css-loader":"^0.28.11", "eslint":"^4.19.1", "eslint-config-react-app":"^2.1.0", "eslint-loader":"^2.0.0", "eslint-plugin-flowtype":"^2.46.1", "eslint-plugin-import":"^2.10.0", "eslint-plugin-jsx-a11y":"^5.1.1", "eslint-plugin-react":"^7.7.0", "extract-text-webpack-plugin":"^4.0.0-beta.0", "file":"^0.2.2", "file-loader":"^1.1.11", "html-webpack-plugin":"^3.1.0", "optimize-css-assets-webpack-plugin":"^4.0.0", "postcss-cssnext":"^3.1.0", "postcss-loader":"^2.1.3", "precss":"^3.1.2", "react-dev-utils":"^5.0.0", "style-loader":"^0.20.3", "url-loader":"^1.0.1", "webpack":"^4.4.1", "webpack-cli":"^2.0.13", "webpack-dev-server":"^3.1.1", "webpack-merge":"^4.1.2" }, "eslintConfig":{ "extends":"react-app", "rules":{ "import/no-webpack-loader-syntax":0, "no-script-url":0, "jsx-a11y/href-no-hash":2 } } }
开发环境小技巧
在开发环境添加cache-loader可以提升在开发环境的编译速度
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。