webpack 判断是否是开发环境_webpack判断开发环境和生产环境 - CSDN
精华内容
参与话题
  • 在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境;生产环境通常指的是...

      在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境;生产环境通常指的是我们将程序开发完成经过测试之后无明显异常准备发布上线的环境,也可以理解为用户可以正常使用的就是生产环境;

      当然开发环境和生产环境在配置方面的需求是不一样的,但是有共同点:

      开发环境的需求:

        模块热更新  (本地开启服务,实时更新)
        sourceMap    (方便打包调试)
        接口代理     (配置proxyTable解决开发环境中的跨域问题)

        代码规范检查 (代码规范检查工具)

      生产环境的需求:

        提取公共代码        
        压缩混淆(压缩混淆代码,清除代码空格,注释等信息使其变得难以阅读)
        文件压缩/base64编码(压缩代码,减少线上环境文件包的大小)
        去除无用的代码

     

      开发环境和生产环境的共同需求:

        同样的入口
        同样的代码处理(loader处理)
        同样的解析配置

     

        在我们搭建好Vue-cli脚手架之后,我们的build文件夹会分别自动的生成webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js三个webpack配置文件;

        webpack.base.conf.js:webpack的开发环境和生产环境的共有配置(开发环境和生产环境都是需要执行的配置)

        webpack.dev.conf.js:webpack的开发环境的特有配置(只在开发环境中执行,生产环境中不执行)

        webpack.prod.conf.js:webpack的生产环境的特有配置(只在生产环境中执行,开发环境中不执行)

     

        我们为什么要区分开发环境和生产环境呢?

          因为一个项目的开发过程中肯定不会是一个版本开发完之后就立马上线,开发是必需,上线是目的;在开发的过程中会有各种各样的问题,比如开发环境中跨域、开发环境和生产环境因环境不同而产生的未知奇葩错误等等都是会时常发生的,我们区分环境的目的就是为了让开发人员在开发的过程中可以方便调试,保持高效的开发;让程序在生产环境中正常有效的运行;

        

        webpack.base.conf.js配置

    const path = require('path');
    //清除build/dist文件夹文件
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    //生成创建Html入口文件
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    //将css提取到单独的文件中
    const MiniCssExtract = require('mini-css-extract-plugin');
    //css压缩
    const OptimizeCss = require('optimize-css-assets-webpack-plugin');
    //压缩js文件
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    //引入webpack
    const webpack = require('webpack');
    
    module.exports = {
    //webpack 入口文件
        entry: './src/index.js',
    //webpack 输出文件配置
        output: {
        //输出文件路径
            path: path.resolve(__dirname, 'dist'),
       //输出文件名
            filename: 'k-editor.[hash:8].js',
        },
      //配置插件
        plugins: [
        //使用插件清除dist文件夹中的文件
            new CleanWebpackPlugin({
                path: './dist'
            }),
        //使用插件生成Html入口文件
            new HtmlWebpackPlugin({
             //模板文件路径
                template: "./src/index.html",
            //模板文件名
                filename: "index.html",
                minify: {
                    removeAttributeQuotes: true, //删除双引号,
                    collapseWhitespace: true,    //压缩成一行,
                },
                hash: true
            }),
          //提取css到style.css中
            new MiniCssExtract({
                filename: 'style.css'
            }),
        ],
        resolve: {
            // modules: [path.resolve('node_modules')],//只在当前目录下查找
            alias: { //别名
                'bootstrap': 'bootstrap/dist/css/bootstrap.css',
            },
            // mainFields: ['style', 'main'],//优先寻找style,
            // mainFiles: [],//入口文件的名字,默认index.js
            // extensions: ['js', 'css', 'json', 'vue']//扩展名顺序
        },
       //loader加载器模块配置
        module: {
            rules: [
                {
                //正则表达式匹配.css为后缀的文件
                    test: /\.css$/,
               //使用loader
                    use: [
                        MiniCssExtract.loader,
                        'css-loader',
                        {
                            loader: "postcss-loader"
                        },
                    ]
             //正则表达式匹配.less为后缀的文件
             //使用lodaer来处理
                }, {
                    test: /\.less$/,
                    use: [
                        MiniCssExtract.loader,
                        'css-loader',
                        {
                            loader: "postcss-loader"
                        },
                        'less-loader'
                    ]
                },
                /* {
                     test: /\.js$/,
                   //不包括node_modules
                     exclude: /node_modules/,
                     use: [{
                         loader: "eslint-loader",
                         options: {
                             enforce: 'pre'    //强制更改顺序,pre 前  post 后
                         }
                     }],
                 },*/
                {
                    test: /\.js$/,  //普通的loader
                   //不包括node_modules
                    exclude: /node_modules/,
                    use: [{
                        loader: "babel-loader"
                    }]
                },
                {
                    test: /\.html$/,
                    use: ['html-withimg-loader']
                },
                {
                    test: /\.(gif|png|jpg)$/,
                    use: [{
                        loader: "url-loader",
                        options: {
                 //图片小于10kb就是图片地址,大于正常打包成base64格式编码    
                            limit: 10000,
                           //输出路径
                            outputPath: 'img/'
                        }
                    }]
                }
            ]
        },
    };

      webpack.dev.conf.js:

    //引入webpack-merge插件进行合并
    const {merge} = require('webpack-merge');
    //引入webpack.base.conf.js文件
    const base = require('./webpack.base.conf');
    //引入webpack
    const webpack = require('webpack');
    //进行合并,将webpack.base.conf.js中的配置合并到这
    module.exports = merge(base, {
       //模块参数
        mode: 'development',
        devServer: {
            contentBase: './dist',
          //端口号
            port: '8383',
            inline: true,
            historyApiFallback: true,//在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
            hot: true//允许热加载
        },
    //启用source-map方便调试
        devtool: 'source-map',
        plugins: [
           //定义全局变量
            new webpack.DefinePlugin({
             //这里必须要解析成字符串进行判断,不然将会被识别为一个变量
                DEV: JSON.stringify('dev')
            })
        ]
    });

      webpack.prod.conf.js:

    const {merge} = require('webpack-merge');
    const base = require('./webpack.base');
    
    const path = require('path');
    const OptimizeCss = require('optimize-css-assets-webpack-plugin');
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    const webpack = require('webpack');
    
    module.exports = merge(base, {
        mode: 'production',
        optimization: {
            minimizer: [
              //压缩CSS代码
                new OptimizeCss(),
              //压缩js代码
                new UglifyJsPlugin({
                  //启用文件缓存
                    cache: true,
                 //使用多线程并行运行提高构建速度
                    parallel: true,
                 //使用 SourceMaps 将错误信息的位置映射到模块
                    sourceMap: true
                })
            ]
        },
        plugins:[
         //使用插件定义全局变量DEV
            new webpack.DefinePlugin({
                DEV:JSON.stringify('production')
            })
        ]
    
    });

      最后在配置一下package.json文件就可以了:

    "scripts": {
        "test": "npm  run test",
        "dev": "webpack-dev-server --config webpack.dev.js",
        "build": "webpack --config webpack.prod.js"
      },

        如何区分开发环境和生产环境呢?

          在node中,我们有一个对象process对象,它里面包括的一些信息,env和它的一些属性,当然NODE_ENV是我们自己加上去的自定义属性,用来区分环境变量,也就是通过这个变量来进行区别是开发环境还是生产环境;但是有个问题,不同电脑上设置的方式是不一样的,所以cross-env就来了,它可以跨平台设置环境和使用环境变量。

    npm install cross-env

       我们在webpack.base.conf.js文件中修改代码:

    const NODE_ENV=process.env.NODE_ENV;
    console.log(NODE_ENV);

         然后我们修改package.json文件:

    //--config是可以设置我们执行哪个webpack文件,默认是执行webpack.config.js,但是我们现在修改文件名了,所以我们要设置一下
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js"

      就这样,我们就实现了利用webpack来区分开发环境和生产环境,当我们用npm run dev运行的时候就是开发环境,当我们运行npm run build的时候就是构建生产环境打包;

    展开全文
  • 当运行npm xx的时候,其实是执行了一个sh命令,去运行不同的配置文件,而不同的配置文件都会去指定自己的NODE_ENV,从而区分是生成环境还是开发环境。 例如: 文件结构 在package.json中,scripts配置了不同的命令...

    node有一个特殊内置环境变量:NODE_ENV,可以从process.env.NODE_ENV中读取到。 当运行npm xx的时候,其实是执行了一个sh命令,去运行不同的配置文件,而不同的配置文件都会去指定自己的NODE_ENV,从而区分是生成环境还是开发环境。 例如: 文件结构

    在package.json中,scripts配置了不同的命令最终执行的是哪个文件:

    如果运行npm run build, 就会找到build/build.js去运行这个文件,文件内容:

    由此指定环境变量。 其他命令同理,当你运行 npm start 时,NODE_ENV就是'development' ,当你运行 npm test ,NODE_ENV就是 ‘test’。

    转载于:https://juejin.im/post/5cc2f65a6fb9a0322c42942a

    展开全文
  • 开发环境的需求: 模块热更新 sourceMap 接口代理 代码规范检查 生产环境的需求 提取公共代码 压缩混淆 文件压缩/base64编码 去除无用的代码 二者共同点: 同样的入口 同样的代码处理(loader处理) 同样的...

    开发环境的需求:

    模块热更新
    sourceMap
    接口代理
    代码规范检查

    生产环境的需求

    提取公共代码
    压缩混淆
    文件压缩/base64编码
    去除无用的代码

    二者共同点:
    同样的入口
    同样的代码处理(loader处理)
    同样的解析配置

    使用webpack-merge拼接开发环境和生产环境:
    配置文件:
    webpack.dev.conf.js
    webpack.prod.conf.js
    webpack.common.conf.js

    webpack.dev.conf.js

    module.exports = {
      devtool:'cheap-module-source-map',
      devServer:{},
      plugins:[
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NamedModulesPlugin(),
      ]
    }

    webpack.prod.conf.js

    module.exports = {
      plugins:[
          new PurifyWebpack({
            paths:glob.sync({
              './src/*.js'
            })
          }),
          new webpack.optimize.CommonsChunkPlugin({
            name:'manifest'
          }),
          new HtmlInlinkChunkPlugin({
            inlineChunkd:['manifest']
          }),
          new webpack.optimize.UglifyJsPlugin(),
          new CleanWebpackPlugin(['dist']),
      ]
    }

    webpack.common.conf.js

    const productionConfig = require('./webpack.prod.conf.js')
    const delevopmentConfig= require('./webpack.dev.conf.js')
    
    const merge = require('webpack-merge');
    const ExtractTextWebpackPlugin= require('extract-text-webpack-plugin');
    const HtmlWebpackPlugin= require('html-webpack-plugin');
    
    const generateConfig = env =>{
    
      const extracLess = new ExtractTextWebpackPlugin({
        filename:'css/[name]-bundle.css'
      })
      const fileLoader = env==='production'
      ?[{
          loader:'file-loader',
          options:{
            name:'[name]-[hash:5].[ext]',
            outputPath:'assets/imgs/'
          }
        }]
       :[{
          loader:'url-loader',
          options:{
            name:'[name]-[hash:5].[ext]',
            limit: 1000,
            outputPath:'assets/imgs/'
          }
       }]
    
      const cssLoaders = [
        {
          loader:'css-loader',
          option:{sourceMap:env==='development'?true:false}
        },
        {
          loader:'postcss-loader',
          option:{
            ident:'postcss',
            plugins:[
              require('postcss-cssnext')
            ].concat(env==='production'
            ?require('postcss-sprites')({spritePath:'dist/assets/img',retina:true})
            :[])
          }
        },
        {loader:'less-loader'},
      ]
      const scriptLoader = ['babel-loader'].concat(env == 'production'?
        []:
        [{loader:'eslint-loader',options:{
          formatter: require('eslint-friendiy-formatter')
        }}]),
    
      ];
      const styleLoader = env === 'production'
      ?extractLess.extract({fallback:'style-loader',use:cssLoaders})
      :[{loader:'style-loader'}].concat(cssLoaders )
    
      return{
        entry:{},
        output:{},
        resolve:{alias:{},...},
        module:{
          rules:[
            {
              test:/\.js$/,
              use:scriptLoader
            },
            {
              test:/\.less$/,
              use:styleLoader 
            },
            {
              text:/\.(png|jpg|jpeg|gif)$/,
              use: fileLoader.concat(env === 'production'?[{
                loader:'img-loader',
                options:{
                  pngquant:{quality:80}
                }
              }]:[])
            },
            {
              test:/\.(eot|woff|woff2|ttf|svg)$/,
              use:fileLoader
            }
          ]
        },
        plugins:[
    
          extractLess,
          new HtmlWebpackPlugin({
            filename:'index.html',
            template:'index.html',
            minify:{
              collapseWhitespace:true
            }
          }),
          new CleanWebpackPlugin(['dist']),
          new webpack.ProvidePlugin({
            $:'jquery'
          })
    
        ]
      }
    }
    module.exports = env =>{
      let config = env ==='production'?productionCOnfig: delevopmentConfig
      return merge(generateConfig(env),config)
    }

    scripts

    “scripts”:{
    “server”:”webpack-dev-server –env development –open –config build/webpack.common.config.js”,
    “”build”:”webpack –env peoduction –config build/webpack.common.config.js”,
    }

    .babelrc

    {preset:['env']}
    展开全文
  • webpack反向代理和开发环境配置

    千次阅读 2018-02-11 17:43:51
    需求: 消除跨域请求带来的option预检请求,动态获取请求的url后端采用nginx(怎么配置我现在没实践过,再过一段时间回来补充~~)前端采用vue(2.5.2)+axios(0.17.1)+webpack-dev-server(2.11.1)步骤1: axios配置...

    需求: 消除跨域请求带来的option预检请求,动态获取请求的url

    后端采用nginx(怎么配置我现在没实践过,再过一段时间回来补充~~)

    前端采用vue(2.5.2)+axios(0.17.1)+webpack-dev-server(2.11.1)

    步骤1: axios配置

    const axiosIns =axios.create()
    if (process.env.NODE_ENV ==='development') {
    axiosIns.defaults.baseURL ='http://*.*.*.*:8080' //内网开发后台地址
    }

    步骤2:build/config/index.js

    proxyTable: {
    '/api': {
    changeOrigin: true
    }
    },
    proxyTable:不写target的原因在webpack的文档里面有:

    当使用内联模式(inline mode)并代理 dev-server 时,内联的客户端脚本并不总是知道要连接到什么地方。它会尝试根据 window.location 来猜测服务器的 URL,但是如果失败,你需要这样。

    后面这个但是的情况还没遇到过;

    验证配置:1 option请求没有了 2 开发模式下不给axios配置defaults.basrURL的话,请求一样会成功,只不过会被hginx转发到127.0.0.1

    配置了defaults.basrURL,请求会发送两次



    没有配置defaults.basrURL,没有option请求了


    vue init webpack 新建项目,我尝试过这样配置没有问题的或者看我的源码  https://github.com/zaofeng/just_for_base

    如有错误 欢迎指正,谢谢

    爱生活,爱佳佳


    展开全文
  • webpack不打包特定的文件

    千次阅读 2019-06-18 14:50:55
    使用vue+webpack创建项目的时候会自动生成一个static文件夹,在static文件夹里面我们可以放一些会经常变化的文件或者照片啥的,但是用的时候需要写上绝对路径。由于项目需要,在开发时的接口地址跟部署的接口地址不...
  • webpack——配置环境变量

    千次阅读 2017-12-29 14:22:59
    开发过程中我们可能需要打大量的log,便于在开发过程中进行调试。但是当在生产环境中在浏览器中打出这么多日志会造成信息泄漏。如果在打生产包的时候逐行将log删除,开发时再添加显然是十分麻烦的。为此,我们可以...
  • 写在前边,今天是2019-1-2号的版本 ...实际开发中,难免要暴露webpack配置文件,来配置一些自己的配置,比如别名,生产环境打包,测试环境打包,测试接口,开发接口,代理等,这些都需要你对webpack...
  • 以前在打包项目,会写三个环境地址,打包前都需要手动切换地址,实现多环境打包配置后可以省掉这一步。  本文来谈一谈多环境打包的配置方法(本人是一枚前端小透明,用的方法不是最优,若有更优的,欢迎指教)  ...
  • webpack4配置vue环境和一些小坑。

    万次阅读 2018-07-08 16:26:57
    npm install webpack vue vue-loader css-loader vue-template-compiler 第二步: 创建文件: src–>app.vue,代码如下: <template&...
  • 前端工程项目的NODE_ENV

    千次阅读 2018-05-09 16:46:18
    在搭建前端工程项目的时候,在package.json的scripts命令内容... 顾名思义,这个变量表示构建项目的当前环境,也就是我们的程序会跑在生产环境、测试环境还是开发环境,在webpack配置中我们会根据不同环境作出不同...
  • webpack的文件监听实现(热更新)

    千次阅读 2019-06-21 00:10:18
    注意:安装之前,先保证webpack项目能正常运行! 目录前言1 第一种方式, --watch1.1 配置package.json1.2 到控制台输入 npm run watch1.3 修改文件,保存后,会自动打包,到浏览器刷新,才能看到变化。1.4 文件...
  • 这部分主要说一下如何配置我们的webpack-dev-server让我们可以在开发的过程中体验到一个非常高效又非常方便的开发模式,提高我们的开发效率,webpack-dev-server是webpack的包,首先需要安装这个webpack包 ...
  • 今天分享下自己使用webpack+vue-cli搭建项目的时候,是如何区分开发、测试、展示、生产这四种环境的。 我们随便百度怎么区分环境,会有很多种答案。但大多数都是让在 config 文件夹下新建一个test.env.js和 pre.env...
  • Webpack入门

    万次阅读 2016-08-11 11:24:47
    Webpack 是什么webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 简单说就是模块加载器,通过使用Webpack,能够像Node.js一样...
  • vue-cli的webpack模板项目配置文件分析

    万次阅读 多人点赞 2017-09-11 11:51:10
    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会“太折腾...
  • 1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取... 2.安装webpack项目模版 vue init 比如: vue init webpack my-project 之后可以在当前目录下下载该模版,然后 npm install
  • webpack-dev-server 提供了一个简单的 web 服务器,并且能够实时重新加载 通过官方文档各种配置,自己实验了一把,不知道是哪里出了问题,一直实现不了实时加载,后来查阅资料,一个很简单的配置就实现了实时加载,...
  • webpack使用总结

    千次阅读 2017-02-15 10:39:15
    学习webpack的时候,看过它的官网,发现非常难懂,各种内容编排的很乱,并且挺生涩难懂的,和React Native等项目的官网比起来,差太多了,所以如果刚开始接触webpack的话,不建议直接去其官网看。 一、webpack...
  • 使用webpack+npm多元化命令

    千次阅读 2016-08-31 22:35:16
    最近一段时间在使用es6+vue+webpack进行开发,之所以选择es6,是因为其本身就包含了模块管理的机制,利用import关键字,基本上就无须再使用requirejs或seajs了。另外es6在es5的基础上,又增加了许多优秀的特性,例如...
  • 理解webpack之process.env.NODE_ENV

    千次阅读 2020-05-17 00:46:00
    NODE_ENV是用户一个自定义的变量,在webpack中它的用途是判断生产环境或开发环境的依据的。 为了查看 process的基本信息,我们可以在文件夹中 新建一个 process.js 文件,在里面加一句代码:cons...
1 2 3 4 5 ... 20
收藏数 7,509
精华内容 3,003
关键字:

webpack 判断是否是开发环境