Open baijikang opened 6 years ago
I use webpack 4 : https://github.com/darkiron/SSR-vue-template
@darkiron 谢谢你的帮助,问题已经解决。 :)
@baijikang @darkiron 这问题解决的关键点是那里? 我用'mini-css-extract-plugin' 提取css 还是报Error: render function or template not defined in component: anonymous
@mir134 我用'mini-css-extract-plugin' 提取css,是可以提出取出来,但是发现所有的都加载了,并没有按需加载,所以暂时先注释掉了。
可以参考以下代码。
// 生产环境 client 端 提取 css ,server 端不用, 开发环境 使用 vue-style-loader 内联到页面
function MiniCssExtractConfig () {
// 打包出来太多 css 都加载了, 优化后再开发此功能
// if (isProd) {
// if (isExtractCss) {
// return isClientBuild ? {
// loader: MiniCssExtractPlugin.loader,
// options: {
// publicPath: path.resolve(__dirname, '../dist')
// }
// } : emptyLoader
// }
// return 'vue-style-loader'
// }
return 'vue-style-loader'
}
module.exports = {
mode: isProd ? 'production' : 'development',
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[chunkhash].js'
},
resolve: {
},
module: {
noParse: /es6-promise\.js$/, // avoid webpack shimming process
rules: [{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
}, {
loader: path.resolve(__dirname, './extend/loader/firstRender.js')
}]
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
'presets': [
'react', ['env', {
'modules': false
}]
],
'plugins': [
'syntax-dynamic-import', [
'component', [{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}]
]
]
}
},
{
test: /\.inlinestyl$/,
use: [
'css-loader?minimize',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')()
]
}
},
'stylus-loader'
]
},
{
test: /\.styl(us)?$/,
oneOf: [
// 这里匹配 `<style module>`
{
resourceQuery: /module/,
use: [
MiniCssExtractConfig(),
{
loader: 'css-loader?minimize',
options: {
modules: true,
minimize: true,
localIdentName: '[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')()
]
}
},
'stylus-loader'
]
},
// 这里匹配普通的 `<style>` 或 `<style scoped>`
{
use: [
MiniCssExtractConfig(),
'css-loader?minimize',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')()
]
}
},
'stylus-loader'
]
}
]
},
{
test: /\.css$/,
oneOf: [
// 这里匹配 `<style module>`
{
resourceQuery: /module/,
use: [
MiniCssExtractConfig(),
{
loader: 'css-loader?minimize',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:5]'
}
}
]
},
// 这里匹配普通的 `<style>` 或 `<style scoped>`
{
use: [
MiniCssExtractConfig(),
'css-loader?minimize'
]
}
]
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader?limit=8192&name=static/[name].[hash:8].[ext]'
}, {
test: /\.(woff2?)(\?.*)?$/,
loader: 'url-loader?limit=30720&name=fonts/[name].[hash:7].[ext]'
}, {
test: /\.(eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader?name=fonts/[name].[hash:7].[ext]'
}
]
},
我创建了一个基于CLI3-SSR 可工程化的项目,欢迎查看 vue-cli3-ssr-project
https://github.com/BengBu-YueZhang/custom-vue-ssr
I moved the project to webpack4
https://github.com/oxgos/SSR-template
I use webpack 4
你好: 我们正考虑从 webpack 3.x 版本升级到 4.x 版本,因为看到了 vue-laoder v15 已经发布。 在我尝试升级的过程中遇到了一些问题,也参考了升级指南(vue-loader.vuejs.org/zh/migrating.html),构建过程比较顺利, 但是项目运行时,server 端总是报错如下: Error: render function or template not defined in component: anonymous 参考了很多资料也没有解决。 我看到这个项目还停留在 webpack 3.x 版本。 请问是否有升级计划。
谢谢。