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

    展开全文
  • 我们现在的配置都是写在一个webpack.config.js文件夹里,但是实际上,我们在开发环境和生产环境中使用的配置是不一样的,比如生产环境中我们需要包的体积不能很大,不然在线上响应会变慢。所以我们需要将生产环境和...

    开始

    我们现在的配置都是写在一个webpack.config.js文件夹里,但是实际上,我们在开发环境和生产环境中使用的配置是不一样的,比如生产环境中我们需要包的体积不能很大,不然在线上响应会变慢。所以我们需要将生产环境和开发环境分开来。

    cross-env

    在node里,我们有一个process对象,它里面包括了node的一些信息,env和它的一个属性,但是并没有process.env.NODE_ENV,这是我们自己添加的一个用来区分环境的变量,我们通过这个来区分生产开发环境。

    但是不同电脑上设置的方式是不一样的,所以cross-env就来了,它可以跨平台设置环境和使用环境变量。

    我们需要在控制台执行:

    yarn add cross-env -D
    

    然后我们在package.json里配置:

    "build": "cross-env NODE_ENV=production webpack",
    "dev": "cross-env NODE_ENV=development webpack-dev-server"
    

    我们在webpack.config.js里添加:

    const NODE_ENV=process.env.NODE_ENV;
    console.log("--------"+NODE_ENV+"-----------");
    

    然后去控制台执行,当执行yarn run build时:
    在这里插入图片描述
    控制台打印出了我们设置的production。

    执行yarn run dev的时候:
    在这里插入图片描述
    打印出了devlopment,说明我们已经设置完成了。

    webpack-merge

    设置了环境之后我们需要将配置分开,我们先在根目录下新建webpack.config.dev.js(开发环境),webpack.config.prod.js(生产环境),将原本的webpack.config.js修改成webpack.config.common.js(公共)。

    分离开的环境需要和common里的代码合并使用,所以我们就需要用到webapck-merge插件,我们在控制台执行:

    yarn add webpack-merge -D
    

    下载好后先去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.config.dev.js里:

    const path=require('path');
    const webpack=require('webpack');
    const merge=require('webpack-merge');//这里引入merge
    const common=require('./webpack.config.common.js');//这里引入公共代码
    
    module.exports=merge(common,{//注意这里的写法
        mode:'development',
        devtool:'cheap-module-eval-source-map',
        module:{
            rules:[
    
            ]
        },
        devServer: {
            contentBase: path.join(__dirname, "dist"),
            compress: true,//开启gzip压缩
            port: 8080,
            open:true,
            hot:true,
            overlay:true,
        },
        plugins:[
            new webpack.HotModuleReplacementPlugin(),
        ]
    })
    

    生产环境的移到webpack.config.prod.js

    const merge=require('webpack-merge');
    const webpack=require('webpack');
    const common=require('./webpack.config.common.js');
    const MiniCssExtractPlugin=require('mini-css-extract-plugin');
    const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
    const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
    const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
    const CleanWebpackPlugin  = require('clean-webpack-plugin');
    
    module.exports=merge(common,{
        mode:'production',
        module:{
            rules:[
    
            ]
        },
        plugins:[
            new MiniCssExtractPlugin({//提取css
                filename:'css/main.css'
            }),
            new CleanWebpackPlugin('./dist'),//删除dist目录下的文件
            new BundleAnalyzerPlugin({ analyzerPort: 8090 }),
    
        ]
    })
    

    然后去webpack.config.common.js里将相关代码删除就行了。

    这里还有个注意点,在使用MiniCssExtractPlugin.loader的时候是不支持热更新的,所以我们需要根据环境来区分这个,我们在webpack.config.common.js里修改一下:

    //开发环境使用style-loader
    {
    loader:NODE_ENV==="production" ? MiniCssExtractPlugin.loader : "style-loader"
    }
    
    展开全文
  • webpack打包区分开发和生产环境,设置不同的publicPath 1、安装 cross-env npm i -D corss-env 2、package.json中添加环境参数 cross-env NODE_ENV=production cross-env NODE_ENV=development` "scripts": { ...

    webpack打包区分开发和生产环境,设置不同的publicPath

    1、安装 cross-env

    npm i -D corss-env
    

    2、package.json中添加环境参数

    cross-env NODE_ENV=production 和cross-env NODE_ENV=development`

    "scripts": {
        "watch": "webpack --watch",
        "build": "cross-env NODE_ENV=production webpack",
        "dev": "cross-env NODE_ENV=development webpack-dev-server"
    }
    

    3、在需要区分环境的地方使用 process.env.NODE_ENV

    publicPath: process.env.NODE_ENV === 'production' ? 'http://localhost:8083/20201017' : '/'
    
    展开全文
  • 开发环境的需求: 模块热更新 sourceMap 接口代理 代码规范检查 生产环境的需求 提取公共代码 ...使用webpack-merge拼接开发环境和生产环境: 配置文件: webpack.dev.conf.js webpack.p...
  • webpack生产环境和开发环境的配置

    千次阅读 2018-08-05 21:31:14
    最近在做公司游戏预约页面的时候,在配置webpack的时候,忽略了生产模式切换,导致...在配置前,还是先了解下生产环境和开发环境有哪些区别,知道这些后,才知道我们到底要做些什么 开发环境(development)生产...
  • 使用webpack构建的工程,在开发过程中不同环境的配置不同,在各种环境的打包切换过程中需要手动修改相关配置达到预期目的。但是每次都手动修改会比较麻烦,本文简单介绍如何通过对webpack进行配置,实现不同环境打包...
  • 今天分享下自己使用webpack+vue-cli搭建项目的时候,是如何区分开发、测试、展示、生产这四种环境的。 我们随便百度怎么区分环境,会有很多种答案。但大多数都是让在 config 文件夹下新建一个test.env.js pre.env...
  • 写在前边,今天是2019-1-2号的版本 ...实际开发中,难免要暴露webpack配置文件,来配置一些自己的配置,比如别名,生产环境打包,测试环境打包,测试接口,开发接口,代理等,这些都需要你对webpack...
  • 项目初始结构分析通常项目会分成三个运行环境:开发人员在本地跑的开发环境(dev)、测试人员用来做黑盒测试的测试环境(test)线上运行的生产环境(production)。 简单起见,本文只考虑开发环境(dev)和生产环境(prod)...
  • webpack有一个DefinePlugin接口,可以实现根据开发生产环境配置不同变量。范例如下:需求:开发环境请求baseUrl = '';生产环境请求 baseUrl = 'http://localhost:8066'实施:1,webpack.dev.config.js:new webpack...
  • 实际项目运用中,打包到生产环境的代码跟开发环境的代码的需求是不一样的,一个很简单的例子 一般情况下,webpack的mode是production模式的,打包出来的js文件是经过压缩的,这适用于生产环境;但是开发环境我们需要...
  • 看过vue和webpack api的同学都知道,使用npm run dev可以运行开发环境的代码,使用npm run build就是打包生产环境的代码。但是如果我还有测试环境预发布环境,运行npm run build命令只能在生成环境也就是线上环境...
  • webpack (3) 生产环境构建

    千次阅读 2020-02-22 21:56:31
    开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map localhost ...
  • 使用NPM + Webpack进行前端开发的示例

    万次阅读 2016-08-21 21:50:29
    最近在使用Webpack来帮助进行前端开发,觉得这个东西的确挺好用。所以用一个简单的示例记录一下,供他人以及自己以后的参考。 这篇文章不是Webpack的教程贴,也不分析Webpack的优缺点,只是简单的记录我自己觉得还...
  • webpack4 分离css

    千次阅读 2018-07-24 17:50:35
    webpack4之前一直使用是extract-text-webpack-plugin 来分离cssjs。在webpack4之后就无法再分离,很多人配置这个,不报错,但也达不到分离css。 官网上面有一句话: :warning: Since webpack v4 the e...
  • 理解webpack之process.env.NODE_ENV

    千次阅读 2020-05-17 00:46:00
    NODE_ENV是用户一个自定义的变量,在webpack中它的用途是判断生产环境开发环境的依据的。 为了查看 process的基本信息,我们可以在文件夹中 新建一个 process.js 文件,在里面加一句代码:cons...
  • Webpack入门

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

    千次阅读 2020-03-30 21:51:32
    如果我们想根据webpack的配置文件中的mode变量更改行为。那么必须导出一个函数而不是一个对象: const path=require("path") const VueLoaderPlugin = require('vue-loader/lib/plugin') let config={ //入口 ...
  • 搞清楚webpack配置文件中publicPathcontentBase的作用 ...
1 2 3 4 5 ... 20
收藏数 2,583
精华内容 1,033
关键字:

webpack 开发和生产环境区分