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

Question

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

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

Answer 1

第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');

Answer 2

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