webpack条件引入文件

Question

想实现

if(__Dev__){
    import './mock';
}

在dev环境中引入一个mock文件，在生产环境编译掉。这个语法是不对的，怎样实现这个功能？
DefinePlugin好像只能按照上面的方法写，不能实现想要的功能。

Answer 1

如果想在业务代码里根据条件判断的话，要用require，import只能在文件顶部使用。

或者按照 @huangsw 的思路也很好，如果是 Mock 文件的话，比较推荐 @huangsw 的方法

Answer 2

一般在webpack中控制使用的第三方文件，可以在webpack的配置文件中控制，默认是webpack.config.js。

mock.js 你可以这样控制：
在开发环境中才会用到mock,那么当时开发环境时将mock打包进公共js中，生产环境将mock文件排除。

举个例子，开发环境使用jquery和mock,生产环境只是用jquery,配置如下

// webpack.config.js

...
entry:{
    // debug 是识别当前是开发环境还是生产环境的标识，根据你自己的需求而定
    // 下面的路径也要根据项目而定
    common: debug ?
        [
            path.join('./', "jquery.js"),
            path.join('./', "mock.js")
        ]
        : [path.join('./', "jquery.js")],
}
...

当然在plugins 中,公共文件一般要这样设置

// webpack.config.js
...
plugins:{
    new webpack.optimize.CommonsChunkPlugin(
        {name: "common", filename: "js/common.js"} 
    )
}
...

具体上面的操作自己可以灵活使用，思路就是mock文件可以在webpack.config.js进行很好的控制。

---

补充：
开发环境时在用到mock的地方，直接就可以这样使用了：

if(__Dev__){
    // 这里是业务逻辑，而不用再去导入mock文件，因为开发环境已经包含在公共js里
}

Answer 3

有一个提案：import（），可以条件引入，放入代码中

但与业务本身无关的不该加入到入口文件里，最好是放到webpack配置文件中中配置

Answer 4

虽是是老贴了，但写上来应该还有人用的吧。
webpack 条件引入js到html中，可以通过 HtmlWebpackPlugin来实现，即是写定几个模板，根据条件来引入不同的模板来打包。