webpack.DefinePlugin与cross-env区别详解

webpack.DefinePlugin与cross-env常用于在项目工程化中定义环境变量，webpack.DefinePlugin用于在编译期定义环境变量，意味着在代码中写上process.env.NODE_ENV不会在编译期出现错误提醒；cross-env库用于在运行时定义环境变量
DefinePlugin用来做定义。这就类似于我们项目开发中的config文件一样，在config文件中一般放的是系统代码中的一些服务器地址之类的公共信息，我们将这些信息提取出来单独放在配置文件中，方便于后期的维护和管理。

// dev.env.js
module.exports = {
  NODE_ENV: 'development'
}
// prod.env.js
module.exports = {
  NODE_ENV: 'production'
}

// webpack配置
const env = require('../config/dev.env')
module.exports = {
  entry: {},
  output: {},
  resolve: {
    extensions: ['.js']
  }
  module: {},
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env.NODE_ENV
    })
  ]
}

// package.json
{
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js",
    "build:development": "cross-env NODE_ENV=dev node build/build.js",
    "build:test": "cross-env NODE_ENV=test node build/build.js",
    "build:pre": "cross-env NODE_ENV=pre node build/build.js",
    "build:prod": "cross-env NODE_ENV=prod node build/build.js"
  }
}

到此这篇关于webpack.DefinePlugin与cross-env区别详解的文章就介绍到这了,更多相关webpack.DefinePlugin与cross-env内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • webpack DllPlugin xxx is not defined解决办法

    造成这个错误主要有3个可能的原因: context上下文不一致 library和name 不一致 生成的dll文件没加入到html文件中 dll.config.js module.exports = { mode:"production", output: { path:path.resolve(__dirname, '../dist'), filename: '[name].dll.js', library: dllName, //这里需要和DllPlugin option.name

  • 深入浅析vue中cross-env的使用

    cross-env cross-env是跨平台设置和使用环境变量的脚本. 在大多数Windows命令行中在使用NODE_ENV = production设置环境变量时会报错.同样,Windows和Linux命令如何设置环境变量也有所不同. 使用 cross-env 可以设置在不同的平台上有相同的NODE_ENV参数. 使用 安装 npm install cross-env --save-dev package.json "scripts": { "serve": &

  • Webpack path与publicPath的区别详解

    前言 在webpack模块化开发的过程中,发现webpack.config.js配置文件的输出路径总有一个path与publicPath,不解其意. module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I put here?" } } 正文 官方解释 publicPath:

  • webpack.DefinePlugin与cross-env区别详解

    webpack.DefinePlugin与cross-env常用于在项目工程化中定义环境变量,webpack.DefinePlugin用于在编译期定义环境变量,意味着在代码中写上process.env.NODE_ENV不会在编译期出现错误提醒:cross-env库用于在运行时定义环境变量 DefinePlugin用来做定义.这就类似于我们项目开发中的config文件一样,在config文件中一般放的是系统代码中的一些服务器地址之类的公共信息,我们将这些信息提取出来单独放在配置文件中,方便于后期的

  • webpack中的模式(mode)使用详解

    模式(mode) 提供 mode 配置选项,告知 webpack 使用相应模式的内置优化. 用法 只在配置中提供 mode 选项: module.exports = { mode: 'production' }; 或者从 CLI 参数中传递: webpack --mode=production 支持以下字符串值: 1.development 会将 process.env.NODE_ENV 的值设为 development.启用 NamedChunksPlugin 和 NamedModulesPl

  • python中import reload __import__的区别详解

    import 作用:导入/引入一个python标准模块,其中包括.py文件.带有__init__.py文件的目录(自定义模块). import module_name[,module1,...] from module import *|child[,child1,...] 注意:多次重复使用import语句时,不会重新加载被指定的模块,只是把对该模块的内存地址给引用到本地变量环境. 实例: pythontab.py #!/usr/bin/env python #encoding: utf-8

  • webpack源码之loader机制详解

    loader概念 loader是用来加载处理各种形式的资源,本质上是一个函数, 接受文件作为参数,返回转化后的结构. loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中"任务(task)",并提供了处理前端构建步骤的强大方法.loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL.loader

  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    1. 安装依赖:npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件中使用 <style scoped lang="scss"> .box{ w

  • docker中的run/cmd/entrypoint的区别详解

    Dockerfile中run.cmd和entrypoint都能够用于执行命令,下面是三者的主要用途: run命令执行命令并创建新的镜像层,通常用于安装软件包 cmd命令设置容器启动后默认执行的命令及其参数,但CMD设置的命令能够被docker run命令后面的命令行参数替换 entrypoint配置容器启动时的执行命令,不会被忽略,一定会被执行,即使运行 docker run时指定了其他命令. Shell格式和Exec格式运行命令 我们可以用下面两种格式指定run.cmd和entrypoint要

  • Vue完整版和runtime版的区别详解

    目录 创建Vue实例的三种方式 从HTML得到视图 用JS构建视图 使用vue-loader 两者对比 最佳实践 SEO友好 创建Vue实例的三种方式 从HTML得到视图 前提:使用完整版,CDN引入或者修改配置 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // ... configureWebpack: { resolve: { alias: { vue$: 'vue/

  • JS处理数据四舍五入(tofixed与round的区别详解)

    1 .tofixed方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法.具体规则如下: 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一. 显然这种规则不符合我们平常在数据中处理的方式.为了解决这样的问题,可以自定义

  • AngularJS constant和value区别详解

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的. 相同点是:都可以接受两个参数,name和value. 区别: 1.constant(name,value)可以将一个已经存在的变量值注册为服务,并将其注入到应用的其他部分中.其中,name为注册的常量的名字,value为注册的常量的值或对象. 举例: (1)value为值时: angular.module('myApp') .constant('apiKey','12

随机推荐