当我们在开发一个项目的时候,我们一般用development这个环境进行项目的开发,在这个环境下,webpack使用dev-server,帮我们启用一个服务器,然后这个服务器里面还集成了一些,比如hmr这样的特性,只要我更改了代码,他会帮我们重新打包,然后我们代码的内容会实时的展示在对应的页面上,所以开发环境上,development这样的模式非常的方便,但是一旦我们的代码开发完成了,我们需要把我们的代码打包上线,这个时候主要用刀production模式,那么production模式和development模式差异主要在几个方面。
首先在开发环境中,source-map他是非常全的,这样的话可以帮助我们快递定位问题,但是在production环境下,代码已经要上线了,这个时候source-map并不那么重要了,这个时候的source-map会更佳简洁一些
另外一点,在开发环境下,我们的代码不压缩,一旦代码上线,我们希望我们的代码被压缩。
所以在开发环境下,我们webpack.config.js里面
mode: 'development',
devtool: 'cheap-module-eval-source-map',
在上线环境下
mode: 'production',
devtool: 'cheap-module-source-map',
每次开发上线,我们需要不断的去更改webpack.config.js的内容,这样就比较麻烦了,要像解决这个问题,我们这样做,我们给他改一个名字。开发坏境下我们使用webpack.dev.js。线上环境用webpack.prod.js。
然后在package.json里面配置
"scripts": {
  "dev": "webpack-dev-server --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js",
},
然后开发环境运行npm run dev。打包运行 npm run build
我们发现dev和build存在很多相同的代码。比如entry,modules,output。这样就会出现大量重复代码,为了解决这个问题,我们新建一个webpack.common.js。把公共的抽出来,抽出来之后,这个时候直接这样肯定不行,npm run dev就只有webpack.dev.js这里面的文件。我们需要跟它们做一个合并。安装
npm install webpack-merge -D
然后webpack.dev.js和webpack.prod.js引入merge模块
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = {
  // 这个文件要做打包,从哪一个文件开始打包
  entry: {
    main: './src/index.js'
  },
  // 打包模块不知道该怎么办,就去模块配置里面该怎么办
  module: {
    // 规则
    rules: [{
      test: /\.js$/,
      // 如果你的这个js文件在node_modules里面,就不使用babel-loader了
      exclude: /node_modules/,
      loader: 'babel-loader' ,
    },{
    // 假设是以jpg结尾的,我需要一个load帮助我们去打包
    test: /\.jpg|png|gif$/,
    use: {
      loader: 'url-loader',
      options: {
        // 原来是什么名字,打包好还是什么名字
        name: '[name]_[hash].[ext]',
        // 当我碰到jpg,png,gif的时候,打包到根目录下到imgs文件夹里
        outputPath: 'imgs/',
        limit: 2048
      }
    }
  },{
    test: /\.eot|ttf|svg|woff$/,
    use: {
      loader: 'file-loader'
    }
  },{
    // 假设是以css结尾的,我需要一个load帮助我们去打包
    test: /\.scss$/,
    // 需要两个loader,所以不能是个对象,需要是个数组
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 2
        }
      },
      'sass-loader',
      'postcss-loader'
    ]
  },{
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader',
      'postcss-loader'
    ]
  }]},
  // HtmlWebpackPlugin会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  // 打包文件要放到哪里去,就配置在output这个对象里
  output: {
    // 打包好的文件名字
    filename: '[name].js',
    /**
    * 打包出的文件要把他放到哪一个文件夹下,path后面要放一个绝对路径
    * __dirname指的是webpack.config.js所在的当前目录的这个路径
    * 下面这个结合就是一个绝对路径
    */
    path: path.resolve(__dirname, 'dist')
  }
}
webpack.dev.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js'); const devConfig = {
  /**
  * 打包模式,不配置会警告,但底层还是会去配置默认的,就是production
  * production: 压缩模式,被压缩的代码
  * development: 开发模式,不压缩的代码
  *
  */
  mode: 'development',
  /**
  * cheap:在生成source-map的时候可以不带列信息,只带行信息就可以了
  * 同时不要对我load代码的source-map。只要对我的业务代码进行source-map生成
  * 这种方式提示的错误比较全,打包速度比较快,
  */
  devtool: 'cheap-module-eval-source-map',   // 起个服务器
  devServer: {
    // 这个意思是服务器要生成在哪个文件夹下
    contentBase:'./dist',
    // 启动的时候自动打开浏览器,然后自动访问这个服务器地址
    open:true,
    // 开启Hot Module Replacement
    hot: true
  },
  // HtmlWebpackPlugin会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
} module.exports = merge(commonConfig, devConfig);
webpack.prod.js
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js'); const prodConfig = {
  /**
  * 打包模式,不配置会警告,但底层还是会去配置默认的,就是production
  * production: 压缩模式,被压缩的代码
  * development: 开发模式,不压缩的代码
  *
  */
  mode: 'production',
  /**
  * cheap:在生成source-map的时候可以不带列信息,只带行信息就可以了
  * 同时不要对我load代码的source-map。只要对我的业务代码进行source-map生成
  * 这种方式提示的错误比较全,打包速度比较快,
  */
  devtool: 'cheap-module-source-map'
}
module.exports = merge(commonConfig, prodConfig);
这样运行npm run dev, npm run build就没有问题了。
有时候第三方模块会给webpack进行一个整合,都放到build目录里。这两个时候package.json需要进行一个更改
"scripts": {
  "dev": "webpack-dev-server --config ./build/webpack.dev.js",
  "build": "webpack --config ./build/webpack.prod.js",
}

webpack中Development和Production模式的区分打包的更多相关文章

  1. webpack + vue 在dev和production模式下的小小区别

    上周的某一天,和一位同样是前端技术极度爱好的开发者朋友聊天,他在提出了一个问题,他写的vue程序为什么在dev模式运行良好,而在production模式就直接报错了.这让我感到惊讶,还有这么神奇的事情 ...

  2. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  3. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  4. 在webpack中区分环境变量

    webpack 中的定义插件可以帮我们定义一些全局变量,使用方法如下: plugins: [ new webpack.DefinePlugin({ NODE_ENV: JSON.stringify(' ...

  5. [Webpack] Create Separate webpack Configs for Development and Production with webpack-merge

    The development and production modes in webpack optimize the output in different ways. In developmen ...

  6. 20 区分webpack中导入vue和普通网页使用script导入Vue的区别

    回顾包的查找规则: 1.找项目根目录中有没有node_modules的文件夹 2.在node_modules中根据包名,找对应的vue文件夹 3.在vue文件夹中,找一个叫做package.json的 ...

  7. 理解webpack中的process.env.NODE_ENV

    参考资料 一. process 要理解 process.env.NODE_ENV 就必须要了解 process,process 是 node 的全局变量,并且 process 有 env 这个属性,但 ...

  8. webpack中package.json中的Script

    初始化项目 cnpm init -y ,会自动生成一个package.json文件:主要是显示项目的名称.版本.作者.协议等信息 在package.json中scripts中配置:(运行简化) 开发模 ...

  9. webpack打包出现WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. 错误

    打包运行的时候出现以下错误 WARNING in configurationThe 'mode' option has not been set, webpack will fallback to ' ...

随机推荐

  1. 关于SQL注入中编码问题的疑问

    提到SQL注入的绕过,编码是其中最普通的一种方法,最常用的URL编码.之前一直有个疑问,编码与未编码到底有哪些地方存在区别? 以下是本人自己对URL编码的一些见解,可能有错误的地方欢迎大佬们指正. 什 ...

  2. 解决vue-router中this.$router.push无法在新窗口中打开

    解决vue-router中this.$router.push无法在新窗口中打开 let routeData = this.$router.resolve({ path: '/consult', que ...

  3. Coursera机器学习基石 第1讲:The Learning Problem

    这门课的授课老师是个台湾人,师从Caltech的Yaser S. Abu-Mostafa,他们共同编撰了<Learning From Data>这本书.Yaser S. Abu-Mosta ...

  4. IDEA+MAVEN构建一个webapp骨架项目(解决一直卡在downloading plugins for问题)

    下载:链接:https://pan.baidu.com/s/1jJx73H8 密码:nud0 第一步   我在上面链接下载了这个骨架xml,放进本地(你的目录默认.m2)\repository\org ...

  5. Vue.js-简单的增删查功能

    1.Vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图 ...

  6. 十七、IntelliJ IDEA 中的 Maven 项目初体验及搭建 Spring MVC 框架

    我们已经将 IntelliJ IDEA 中的 Maven 项目的框架搭建完成.接着上文,在本文中,我们更近一步,利用 Tomcat 运行我们的 Web 项目. 如上图所示,我们进一步扩展了项目的结构, ...

  7. 【luogu P1825 [USACO11OPEN]玉米田迷宫Corn Maze】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1825 带有传送门的迷宫问题 #include <cstdio> #include <cst ...

  8. 【题解】洛谷P1541 [NOIP2010TG] 乌龟棋(类似背包的DP)

    题目来源:洛谷P1541 思路 类似背包的题 总之就是四种卡牌取的先后顺序不同导致的最终ans不同 所以我们用一个四维数组每一维分别表示第几种取了几张的最大分数 然后就是简单DP解决 代码 #incl ...

  9. 【题解】洛谷P1120 小木棍(搜索+剪枝+卡常)

    洛谷P1120:https://www.luogu.org/problemnew/show/P1120 思路 明显是搜索题嘛 但是这数据增强不是一星半点呐 我们需要N多的剪枝 PS:需要先删去超出50 ...

  10. 通过ES6写法去对Redux部分源码解读

    在Redux源码中主要有四个文件createStore,applyMiddleware,bindActionCreators,combineRedures createStore.js export ...