webpack配置开发环境和生产环境

       因为使用场景的不同,我们在搭建环境时常常需要分为开发环境和生产环境。有以下几种方式可以实现,每种使用场景各不同,可根据实际情况使用。

1. 通过cross-env在命令行中声明。

2. 通过process.env.NODE_ENV在配置入口文件声明。

process.env.NODE_ENV = 'production'

3. 通过webpack.defineplugin插件声明。

new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
  }
})

4. 写入文件(配置入口文件)。

fs.open('./build/env.js', 'w', function (err, fd) {
  const buf = 'export default "development";';
  // const buf = 'export default "production";';
  fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) { });
});

       其中1、2可以在wqebpack的config配置文件中使用,而3只是给依赖中注入了环境变量,也就是在src文件下有效,4声明后各处使用都是有效的。注意:2只有在声明后面的引入文件和配置项中才是有效的。

你可能感兴趣的:(js,vue,webpack,webpack,vue环境搭建)