最近在学习前端的工具 webpack,水平有限在使用过程中有很多问题。这个学习项目我放在了 webpack 学习。目录结构是这样的
|-- app/ 应用目录
|-- build/ 发布目录
|-- node_modules/
|-- package.json
|-- webpack.config.js
|-- webpack.production.config.js
需求描述:在开发阶段,我希望所有的请求都提交到测试地址,比如我在任意的 js 文件中 $.get('/api/a')
的时候,它请求的地址是 http://localhost:8888/api/a.json
,这样就可以得到测试数据;而在项目发布后,它能请求线上服务器,地址是 http://xxx.com/api/a
;
于是我先在 webpack.config.js
配置了 devServer
,但是没有起到任何作用,原因我不清楚,所以想请教下大伙,应该如何达到这个目的。
// 我在 webpack.config.js 中的配置
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
proxy: { // 没有效果,为什么?
'/api/*' : {
target: 'http://example.com',
secure: false
}
}
}
需求描述:对于通用的文件,如 bootstrap.min.css
,我是通过复制的方式直接 copy 到指定发布目录下的,像下面这个样子。虽然达到目的,但是感觉很有不妥呀,都没有好好利用到 node_modules
,文件重复了。应该如何改进呢?
// 通常文件在 webpack.config.js 中的配置
new CopyWebpackPlugin([
{ from: 'node_modules/bootstrap/dist/css/bootstrap.min.css', to: 'vendor/bootstrap.min.css'},
{ from: 'app/templates/tpls', to: 'templates/tpls'}
])
练习项目中其它任何不规范、有待改进的地方,大伙都可以指出来。非常感谢!
第1个问题,自己找到方法解决了