webpack4 配置 ssr 环境遇到“document is not defined”
最近使用webpack4配置ssr环境,发现的问题:
ReferenceError:documentisnotdefined
本次package.json使用版本信息:
{ "vue-loader":"^15.4.2", "mini-css-extract-plugin":"^0.4.3", "webpack":"^4.20.2", "webpack-cli":"^3.1.2" ... }
相关代码
问题原因:
在服务端渲染打包的配置中使用了mini-css-extract-plugin是的serverbundle中会使用到document,node环境中不存在window对象,所以报错。
解决办法:
在webpack.base.config.js中不配置样式相关的loader:
#基本配置 constpath=require('path') constwebpack=require('webpack') const{VueLoaderPlugin}=require('vue-loader') constFriendlyErrorsPlugin=require('friendly-errors-webpack-plugin') constresolve=dir=>path.join(__dirname,'../',dir) constisProd=process.env.NODE_ENV==='production' constbase={ mode:isProd?'production':'development', devtool:isProd?false:'cheap-eval-source-map', output:{ path:path.resolve(__dirname,'../dist'), publicPath:'/dist/', filename:'[name].[chunkhash].js' }, resolve:{ alias:{ 'vue$':'vue/dist/vue.esm.js', 'public':path.resolve(__dirname,'../public') } }, module:{ noParse:/es6-promise\.js$/,//avoidwebpackshimmingprocess rules:[ { test:/\.vue$/, loader:'vue-loader', include:resolve("src") }, { test:/\.js$/, loader:'babel-loader', exclude:file=>( /node_modules/.test(file)&&!/\.vue\.js/.test(file) ) }, { test:/\.(png|jpg|gif|svg)$/, loader:'url-loader', options:{ limit:10000, name:'[name].[ext]?[hash]' } } ] }, plugins:setPlugin() } functionsetPlugin(){ constbase=[newVueLoaderPlugin()] constdev=[newFriendlyErrorsPlugin()] constprod=[] returnbase.concat(isProd?prod:dev) } module.exports=base;
在webpack.client.config.js中使用mini-css-extract-plugin:
#只展示先关配置 constwebpack=require('webpack') constmerge=require('webpack-merge') constbase=require('./webpack.base.config') constMiniCssExtractPlugin=require("mini-css-extract-plugin"); constVueSSRClientPlugin=require('vue-server-renderer/client-plugin') constisProd=process.env.NODE_ENV==='production' constconfig=merge(base,{ module:{ rules:[ { test:/\.styl(us)?$/, use:[ isProd?MiniCssExtractPlugin.loader:'vue-style-loader', { loader:'css-loader' }, 'stylus-loader' ], }, { test:/\.(le|c)ss$/, use:[ isProd?MiniCssExtractPlugin.loader:'vue-style-loader', { loader:'css-loader' }, 'less-loader', ], } ] }, plugins:[ newMiniCssExtractPlugin({ filename:isProd?'[name].[chunkhash].css':'[name].css', chunkFilename:isProd?'[id].[chunkhash].css':'[id].css', }), newVueSSRClientPlugin() ] }) module.exports=config
在webpack.server.config.js中不使用mini-css-extract-plugin:
#只展示先关配置 constwebpack=require('webpack') constmerge=require('webpack-merge') constbase=require('./webpack.base.config') constVueSSRServerPlugin=require('vue-server-renderer/server-plugin') module.exports=merge(base,{ target:'node', module:{ rules:[ { test:/\.styl(us)?$/, use:[ 'vue-style-loader', { loader:'css-loader' }, 'stylus-loader' ], }, { test:/\.(le|c)ss$/, use:[ 'vue-style-loader', { loader:'css-loader' }, 'less-loader', ], } ] }, plugins:[ newVueSSRServerPlugin() ] })
参考Demo:
tiodot/vnews
相关issues:
vue-loader@15.0.0-rc.1inaserverbundle
webpack-contrib/mini-css-extract-plugin
结语:
由于本次webpack4版本比较新,周边的插件没能及时做出相应更新;
相信经过社区的不断努力,整个生态会更加健壮。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。