服务端webpack配置
- 服务端要正确处理首屏的图片和样式等
- 服务端要支持动态import，懒加载
webpack.server.js
const config = require('./webpack.base.js');
const serverConfig = {
target: 'node', // 指定为node环境下
mode: 'development',
entry: './src/server',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
externals: [nodeExternals()], // 不打包node_modules等模块
module: {
rules: [{
test: /\.css?$/,
use: ['isomorphic-style-loader', { // 处理服务端样式文件
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true, // 开启css-module
localIdentName: '[name]_[local]_[hash:base64:5]'
}
}]
},{
test: /\.(png|jpeg|jpg|gif|svg)?$/,
loader: 'url-loader',
options: {
limit: 8000,
outputPath: '../build/', // 图片资源输出路径
publicPath: '/'
}
}]
}
};
module.exports = merge(config, serverConfig);
注意的点，其实大部分都是关于webpack的踩坑记录
- 服务端无法识别和处理css,图片资源等，所以要用webpack打包编译，其中对于css的loader
isomorphic-style-loader
- express或者koa起的服务代理的静态代理地址一定要对
app.use(express.static('build'))
- 如果在
.babelrc中配置了plugin，要注意dynamic-import-node会对lodabel按需加载有影响，因为这是配置服务端支持动态import()的插件，会导致webpack编译碰到import()时被该插件劫持
-
babel-preset-env: "targets": ["node": "current"]要指定node编译支持到当前版本, 不然会报regeneratorTime等不支持等错误
- 如果想调试前端项目，配置
webpack-dev-server时，--hot --inline在webpack最新版本中只需要配置--inline就可以内联刷新，同时index.html中对js的引用要和webpack中配置的contentBase匹配
实战
- 会开发一个结合SSR《全网音乐免费试听-周杰伦版》的SPA应用
- 正式开发中还是建议使用
Next
- 关于node中处理css和图片等可以使用插件：
webpack-isomorphic-tools,universal-webpack但是前面的作者已经不更新了
