webpack 如何配置测试和生产环境

最近在学习前端的工具 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'}
])

练习项目中其它任何不规范、有待改进的地方,大伙都可以指出来。非常感谢!

阅读 12.4k
2 个回答

第1个问题,自己找到方法解决了

1. 安装 yargs
2. 在 package.json 中修改启动参数 "start": "webpack-dev-server --hot --inline --mock --config webpack.config.js",多了一个 --mock
3. 在 webpack.config.js 中
var args = require('yargs').argv;

plugins:[
    ...,
    new webpack.DefinePlugin({
        __DEV__: JSON.stringify(JSON.parse( args.mock || false ))
    })
4. 然后在 index.js 中,根据 __DEV__ 的设置,载入不同的配置文件
var env = __DEV__ ? require('./js/test.env') : require('./js/product.env');

引用第三方库的js、css时,可以在相应的组件js或者entry js中,通过impor/require方法进行引用,同时可以利用ExtractTextPlugin,将js中引用的css在打包过程中抽离出来成为单独的css文件

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题