webpack 开发模式 生产模式_webpack中的开发模式和生产模式 - CSDN
精华内容
参与话题
  • webpack中的开发模式生产模式

    千次阅读 2019-06-20 10:22:36
    详细解读webpack配置之mode 众所周知,webpack主要的作用就是将项目当中的各种文件(.html、.css、.js、.json、.vue、图片......)全部进行整合打包,所以需要很多的依赖和处理方法,那么它的配置也将会有很多很多的...

    详细解读webpack配置之mode

    众所周知,webpack主要的作用就是将项目当中的各种文件(.html、.css、.js、.json、.vue、图片......)全部进行整合打包,所以需要很多的依赖和处理方法,那么它的配置也将会有很多很多的东西....下面,我就将一些比较常用的列举出来,它们的用法以及配置...

    module.exports = {
       mode: '',
       entry: '',
       output: '',
       plugins: [],
       module: [],
       resolve: '',
       devServer: {}
    }
    

    1.mode (模式)

    mode值分为三种:none / development / production

    1.1none模式下的模块打包

         在没有任何优化处理的情况下,按照webpack默认的情况下打包出模块,它会将模块打包至数组之中,调用模块的时候,就是直接调用模块在此数组中的一个序号,然后没有进行压缩、混淆之类的优化。

         但是无论是在开发环境development下,还是在正式环境production下,这个代码都是不过关的,对于开发环境,此代码可读性太差,对于正式环境,此代码不够简洁,因此,为了减少一次重复操作,webpack4提供的development/production可以很大程度上帮我们做一大部分的事情,我们要做的,就是在这些事的基础上增加功能。

    1.2development模式下,webpack做了哪些打包工作

         development是告诉程序,我现在是开发状态,也就是打包出来的内容要对开发友好。在此mode下,就做了以下插件的事情,其他什么都没有做,所以这些插件可以省略。

    //webpack.config.js
    module.exports = {
       mode:'development',
       devtool:'eval',
       plugins: [
          new webpack.NamedModulesPlugin(),
          new webpack.NamedChunksPlugin(),
          new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") })
       ]
    }
    

    我们看看NamedModulesPlugin和NamedChunksPlugin这两个插件都做了啥,原本我们的webpack并不会给打包的模块加上名字,一般都是按照序号来,从0开始,然后加载第几个模块,这个对机器来说无所谓,查找载入很快,但是对于人脑来说就是灾难了,所以这个时候给各个模块加上姓名,便于开发的时候查找。

    没有NamedModulesPlugin,模块就是一个数组,引用也是按照在数组中的顺序引用,新增模块都会导致序号的变化。

    有了NamedModulesPlugin,模块都拥有了姓名,而且都是独一无二的key,不管新增减少多少模块,模块的key都是固定的

    除了NamedmodulesPlugin,还有一个NamedChunksPlugin,这个是给配置的每个chunks命名,原本的chunks也是数组,没有名字。

    NamedChunksPlugin其实就是提供了一个功能,你可以自定义chunks的名字,加入我在不同的包中有相同的chunk名,怎么办?这个时候就要在进行进一步的区分了,我们可以用所有的依赖模块名加上本模块名,因为Chunk.modules已经废弃了,现在用其他的方法来代替chunk.mapModules,然后重命名chunk的名字

    new webpack.NameChunksPlugin( (chunk) => {
       return chunk.mapMudoles( m => {
          return path.relative(m.context,m.request);
       }).join('_')
    })
    

    总结:development也就给我们省略了命名的过程,但是其他还是要我们自己加的。

    1.3production

    在正式版本中,所省略的插件们,如下所示,我们会一个个分析

    //webpack.config.js
    module.exports = {
       mode:'production',
       plugins: [
          new UglifyJsPlugin(/*...*/),
          new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
          new webpack.optimize.ModuleConcatenationPlugin(),
          new webpack.NoEmitOnErrorsPlugin()
       ]
    }
    

    UglifyJsPlugin

    我们第一个需要处理的就是混淆&压缩js了吧,这个时候就要请出UglifyJs了,他在webpack中的名字是

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

    这样,就可以使用他了

    不过 new UglifyJsPlugin(),这个插件我们可以在optimize中配置,效果是一样的,那么我们是不是不用在导入一个新的插件了,这样反而会拖慢webpack的打包速度

    optimization: {
       minimize: true
    }
    

    将插件去除,混淆压缩放入optimization,这样webpack速度快的起飞了,只有第一次打包会慢,之后在打包就快了

    ModuleConcatenationPlugin

    webpack.optimize.ModuleConcatenationPlugin()这个插件的作用是什么呢?官网文档上是这么描述的

    记住,此插件仅适用于由webpack直接处理的ES6模块,在使用转译器(transpiler)时,你需要禁用对模块的处理(例如Babel中的modules选项)。

    NoEmitOnErrorsPlugin

    最后一个插件就是webpack.NoEmitOnErrorsPlugin(),这个就是用于防止程序报错,就算有错误也给我继续编译,很暴力的做法...

    others

    还有一些默认的插件配置,也就是可以不在plugin中引用的配置

    OccurrenceOrderPlugin

    webpack.optimize.OccurrenceOrderPlugin这个插件的作用是按照chunk引用次数来安排出现顺序,因为这让经常引用的模块和chunk拥有更小的id。

    SideEffectsFlagPlugin

    webpack.optimize.SideEffectsFlagPlugin()这个插件如果需要生效的话,需要两个条件,一个是导入的模块已经标记了sideEffect,即package.json中的sideEffects这个属性为false,第二个就是当前模块引用了次无副作用的模块,而且没有使用。那么在打包的时候,就不会将这个模块打包到文件中。

    展开全文
  • webpack生产环境和开发环境的配置

    千次阅读 2018-08-05 21:31:14
    最近在做公司游戏预约页面的时候,在配置webpack的时候,忽略了生产模式切换,导致开发过程中有些痛苦,当改动样式或者某个插件配置时,本地server要等待编译很久才生效。用了很久的webpack开发,之前一直没太在意...

    最近在做公司游戏预约页面的时候,在配置webpack的时候,忽略了生产模式切换,导致开发过程中有些痛苦,当改动样式或者某个插件配置时,本地server要等待编译很久才生效。用了很久的webpack做开发,之前一直没太在意,现在特地整理下,也为以后做项目更加规范吧。

    在配置前,还是先了解下生产环境和开发环境有哪些区别,知道这些后,才知道我们到底要做些什么

    开发环境(development)生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置

    虽然,以上我们将生产环境开发环境做了略微区分,但是,请注意,我们还是会遵循不重复原则(Don't repeat yourself - DRY),保留一个“通用”配置。为了将这些配置合并在一起,我们将使用一个名为 webpack-merge 的工具。通过“通用”配置,我们不必在环境特定(environment-specific)的配置中重复代码

    那么,开始配置文件的编写。这里,我们把公共的配置,放到webpack.common.js中,生产环境配置放到webpack.prod.js中,开发环境配置放到webpack.dev.js中。

    公共配置(webpack.common.js)中,我们常用的插件,入口、输出文件、模块配置

    const path = require('path');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        entry: {
            app: './src/index.js'
        },
        plugins: [
            new CleanWebpackPlugin(['dist']),
            new HtmlWebpackPlugin({
                title: 'Production'
            })
        ],
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                }
            ]
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    }

    生产配置(webpack.prod.js)中配置"source-map",生产环境下的插件,然后合并

    const merge = require('webpack-merge');
    const webpack = require('webpack');
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    const common = require('./webpack.common');
    
    module.exports = merge(common, {
        devtool: 'source-map',
        plugins: [
            new UglifyJSPlugin({
                sourceMap: true
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
            })
        ]
    })

    注意这里使用了webpack.DefinePlugin()插件,来指定环境。这是因为,许多 library 将通过与 process.env.NODE_ENV 环境变量关联,以决定 library 中应该引用哪些内容。例如,当不处于生产环境中时,某些 library 为了使调试变得容易,可能会添加额外的日志记录(log)和测试(test)。其实,当使用 process.env.NODE_ENV === 'production' 时,一些 library 可能针对具体用户的环境进行代码优化,从而删除或添加一些重要代码

    开发环境(webpack.dev.js)中配置"inline-source-map"、本地服务器,然后合并公共配置

    const merge = require('webpack-merge');
    const common = require('./webpack.common.js');
    
    module.exports = merge(common, {
        devtool: 'inline-source-map',
        devServer: {
            contentBase: './dist'
        }
    })

    现在,我们可以在package.json中为生产和开发模式配置单独的运行脚本,

    展开全文
  • webpack4.x打包过程

    千次阅读 2018-06-11 17:06:20
    一、全局安装 webpack-cli 脚手架 npm install webpack-cli -g 二、新建一个项目wp,并在wp目录下初始化一个package.json文件。 npm init -y 在wp目录下新建一个src目录,并在该目录下新建一个index.js ...

    一、全局安装 webpack-cli 脚手架

    npm install webpack-cli -g

    二、新建一个项目wp,并在wp目录下初始化一个package.json文件。

    npm init -y

    在wp目录下新建一个src目录,并在该目录下新建一个index.js 作为入口文件
    这里写图片描述

    webpack4.x 给我们提供了两种打包模式:

    development 为开发模式
    production 为生产模式,打包出的 main.js 代码自动压缩

    我们可以直接使用命令 webpack --mode development 进行开发模式打包
    这里写图片描述
    这里写图片描述
    我们使用生产模式webpack --mode production 打包
    这里写图片描述
    此时代码已经被压缩。

    不管哪种模式,我们每次打包都使用 webpack --mode development 或者 webpack --mode production 都有点麻烦,我们可以修改下package.json文件里面的 scripts 属性:

    "dev": "webpack --mode development",
    "build: "webpack --mode production"

    最后我们就可以使用 npm run dev 进行开发模式打包,使用 npm run build 进行生产模式打包。

    展开全文
  • webpack如何兼容开发模式生产模式

    千次阅读 2018-06-06 18:13:47
    在前端工程中引入webpack后,开发人员往往会有下面两个疑问: webpack的编译实际上是对代码执行合并、压缩和混淆等动作,最终生成的代码往往已经不具备可读性,不利于开发对问题进行debug; 每次代码修改都需要...

    在前端工程中引入webpack后,开发人员往往会有下面两个疑问:

    1. webpack的编译实际上是对代码执行合并、压缩和混淆等动作,最终生成的代码往往已经不具备可读性,不利于开发对问题进行debug;
    2. 每次代码修改都需要webpack执行一次编译动作,上面提到的合并、压缩和混淆等动作过于消耗性能。

    首先看一下可读性问题,以笔者上一篇博客的代码为例,我们在mainCtrl.js里故意构造一个脏检查次数达到循环上限的异常:
    这里写图片描述

    嗯,错误还是看的出来,看看有没有办法debug:
    这里写图片描述

    看起来想debug是没戏了,压缩以后完全看不出来代码是在做什么,想在线上调试的话看来得想其他办法解决。

    再看一下webpack编译的性能问题:
    这里写图片描述

    总共6个文件。不超过200行代码,还没做混淆就用了3秒多。按实际项目里的文件数量及执行动作来算的话,几十秒甚至几百秒都是正常的,但是让开发每次调试都要等这么久就不靠谱了。

    这其实是在开发阶段使用生产模式带来的问题,所以在开发阶段有必要引入开发模式:不要代码压缩混淆,源码支持调试。

    而webpack4允许我们指定编译使用开发模式还是生产模式,这由mode这个配置来控制,value为枚举值:development/production,分别对应开发模式和生产模式(这个配置可以作为命令行的配置参数也可以作为配置文件中的一个配置项,默认值是production,即生产模式)。

    下面在webpack.config.js中增加mode配置项:

    "use strict";
    module.exports = {
        entry: "./index.js",
        output: {
            path: __dirname + "",
            filename: "bundle.js"
        },
        module: {
    
        },
        mode: 'development'
    };

    重新编译一把,性能明显有了提升(只要几百毫秒就搞定了):
    这里写图片描述

    不过看下源码,貌似还是不支持调试(都用eval函数包住):
    这里写图片描述

    这是由于devtool我们没有配置,这个配置项用于指定编译时的source-map生成方式,默认值是eval。官方文档给出了7种配置项说明:

    模式 说明
    eval 每个module会封装到 eval 里包裹起来执行,并且会在末尾追加注释
    source-map 生成一个SourceMap文件
    hidden-source-map 和source-map一样,但不会在bundle末尾追加注释
    inline-source-map 生成一个DataUrl形式的SourceMap文件
    eval-source-map 每个module会通过eval()来执行,并且生成一个DataUrl形式的SourceMap
    cheap-source-map 生成一个没有列信息(column-mappings)的SourceMap文件,不包含loader的 SourceMap(譬如babel的SourceMap)
    cheap-module-source-map 生成一个没有列信息(column-mappings)的SourceMap文件,同时loader的 SourceMap也被简化为只包含对应行的

    那就在webpack.config.js中再增加devtool配置项:

    "use strict";
    module.exports = {
        entry: "./index.js",
        output: {
            path: __dirname + "",
            filename: "bundle.js"
        },
        module: {
    
        },
        devtool: 'inline-source-map',
        mode: 'development'
    };

    编译用时差不多,就不贴出来了,主要看下源码(网上有很多介绍devtool的不同配置项编译生成文件区别的文章,有兴趣的同学请自行百度,这里就不多说了):
    这里写图片描述

    ok,至此本文开头的两个问题都已经基本解决,但是每次切换模式webpack.config.js还要来回改,而且编译生成的文件一旦发生冲突解决起来也非常麻烦,所以最好的办法就是开发模式和生产模式都给出独立的配置文件,两边互不干扰,本地调试调用开发模式的配置文件编译,最终发布包里的文件由编译环境调用生产模式的配置文件编译生成。比如package.json可以加上两条命令:

    {
      "name": "angular-webpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --progress --colors --config ./webpack.dev.config.js",
        "product": "webpack --progress --colors --config ./webpack.product.config.js"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "angular": "^1.4.6",
        "angular-ui-router": "^0.2.18",
        "css-loader": "^0.28.11",
        "jquery": "^1.9.1",
        "oclazyload": "^1.0.1",
        "style-loader": "^0.21.0",
        "uglifyjs-webpack-plugin": "^1.2.5",
        "webpack": "^4.6.0",
        "webpack-cli": "^2.1.3"
      }
    }

    dev对应开发模式,我们本地执行npm run dev就可以了;product对应生产模式,由编译环境执行npm run product来执行合并、压缩和混淆等动作生成最终的文件。

    本文涉及代码github地址:https://github.com/liqing-taoyanzoukaila/angular-lazyload-webpack

    展开全文
  • 彻底解决webpack打包慢

    千次阅读 2018-06-13 09:47:41
    前端开发一个crm项目的时候,因为项目内容比较庞大,导致webpack编译和打包都巨慢,实在是影响开发效率,所以着手升级webpackwebpack4-es6-react webpack4-es6-react是一个全新的基于webpack4、react16、es6...
  • Webpack 4.0.0 正式版已发布,Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有...
  • Webpack——令人困惑的地方

    万次阅读 2016-07-15 08:42:52
    Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。 当我第一次看到Webpack的配置文件时,它看起来非常的陌生,我非常的疑惑。经过一段时间...
  • webpack以及gulp介绍

    万次阅读 2020-02-23 23:19:12
    webpack webpack3和4的区别: 4是零配置的; $npm i webpack -D $npm i webpack -cli -D 就可以在命令行使用webpack命令; 入口文件可以写成字符串,数组或者对象。 写成数组就打包到一起,写成对象会分片打包。 ...
  • 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配置...
  • webpack 中dev模式,默认只能使用localhost访问,不能使用ip地址访问。如果想即使用ip地址又使用localhost(127.0.0.1)访问, 可修改dev的host的参数值: 参考地址: ...
  • webpack4下有production(生产)和development(开发)两种模式,若不设置,则会在终端下warn个不停。  warn内容如下: The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ...
  • webpack4.x开发环境配置

    万次阅读 多人点赞 2019-10-13 14:00:46
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很多教程的经验已经不适合。当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装...
  • webpack中output之path和publicPath详解

    万次阅读 2018-06-09 11:41:56
    path:所有输出文件的目标路径;...区别:path是webpack所有文件的输出的路径,必须是绝对路径,比如:output输出的js,url-loader解析的图片,HtmlWebpackPlugin生成的html文件,都会存放在以path为基础的目...
  • 开发环境配置:把开发环境需要的相关配置放置到 webpack.dev.js 生产环境配置:把生产环境需要的相关配置放置到 webpack.prod.js 安装yarn add webpack-merge --dev 或者 npm i webpack-merge -D 生产
  • webpack之自动编译的三种方式

    千次阅读 2018-08-26 01:03:22
    前言 自动编译方式 观察模式 web服务器 webpack中间件 总结 ...每次编译代码时,需要手动输入yarn run build,挺麻烦的,...webpack’s Watch Mode 观察模式 webpack-dev-server web服务器 webpack-dev-middleware ...
  • 简单地使用webpack进行打包

    万次阅读 2018-07-04 09:49:17
    之前写的有些零散,现在一步步再重新写.一.确保已经安装了nodeJS之后.二. 创建webpack-demo,我的是f盘... 接下来装webpacknpm install webpack --save-dev安装完成:查看项目下,发现已经:5.然后用编译器打开当前项目...
  • Webpack4.0初体验

    千次阅读 2018-07-06 09:42:25
    简要介绍:Webpack4.0.1版本已经发布了2周了,下面用体验一下Webpack4.0 1 .安装Webpack4.0 (1) Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version 明确不支持...
  • webpack 生产模式基础配置

    千次阅读 2017-10-07 11:42:30
    webpack 生产模式基础配置
  • 查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大,剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer==(可视化视图查看器)== 介绍1:webpack-bundle-...
  • webpack4打包多个js文件

    万次阅读 2018-07-19 16:36:15
    默认文件目录: 1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js ..., //打包为开发模式 // 入口配置的对象中,属性为输出的js文件名,属性值为入口文件 entry: { m...
1 2 3 4 5 ... 20
收藏数 24,711
精华内容 9,884
关键字:

webpack 开发模式 生产模式