Webpack4 学习笔记八 开发环境和生产环境配置

时间:2021-11-13 07:10:26
  • webpack resolve属性
  • webpack 区分开发环境和生产环境

webpack resolve属性

该选项的作用是设置模块如何被解析。

resolve.alias: 设置别名, 在vue中都是 @代表src目录。 也可以在key尾部添加$,精确匹配某一文件

resolve.enforceExtension: 引入的模块文件后面要不要带扩展名, true:一定要带, 默认为 false

  import foo from './foo'  // ./foo.js 中的.js可以省略

resolve.extensions: 自动解析确认的扩展,默认值为:

   extensions: ['.js', '.json'] 

resolve.mainFiles: 当你引入路径只精确到一个文件夹时, 引入文件夹中的哪个.js文件, 默认为: index

   mainFiles: ['index']

了解更多>> 前往 webpack官网

webpac配置:

  module.exports = {
    resolve: {
      alias: path.resolve(__dirname, 'src'),
      main$: path.resolve(__dirname, 'src/main.js')
    },
    enforceExtension: false,
    extensions: ['.js', '.json', '.css', 'scss'],
    mainFiles: ['index']
  }

webpack 区分开发环境和生产环境

有时候需要根据不同的环境进行打包,输出不同的配置。在生产环境中希望可以在控制台打印日志, 而到开发环境将不打印。
在开发环境中可以启用 devServer,通过proxy代理到后端服务器。 到生成环境要直接连后端的真实服务器地址等等

公用配置文件:
webpack-mergn + 开发配置 = 开发总配置
webpack-mergn + 生产配置 = 生产总配置

先安装 npm i webpack-mergn --save-dev

webpack.base.conf.js
先创建一个公用的 配置文件, 开发和生产都会用到的

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ]
      }
    ]
  },
  // 设置别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    enforceExtension: false,
    extensions: ['.js', '.json', '.css', '.scss']
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
}

创建一个开发配置文件, webpack.dev.conf.js

const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const developmentBaseConf = require('./webpack.base.conf')

module.exports = merge.smart(developmentBaseConf, {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 3000,
    compress: false,
    progress: true
  },
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      STATE: JSON.stringify('development')
    })
  ],
  watchOptions: {
    aggregateTimeout: 500,
    poll: 1000,
    ignored: /node_modules/
  }
})

然后在 webpack.dev.conf.js 中引入公用的配置文件 webpack.base.conf.js, 然后通过 mergn.smart只能合并为一个对象。
在生产配置中可以设置响应的 devtool, 开启一个devServer等等。
webpack.defindPlugin 插件: 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。
如果在开发构建中,而不在发布构建中执行日志记录,则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处,设置它,就可以忘记开发和发布构建的规则。

  STATE: JSON.stringify('development') 

这里为什么要用 JSON.stringify呢? 因为这个插件直接执行文本替换。

创建生产环境配置, webpack.prod.conf.js

const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const developmentBaseConf = require('./webpack.base.conf')

module.exports = merge.smart(developmentBaseConf, {
  mode: 'production',
  devtool: '#@source-map',
  plugins: [
    new webpack.DefinePlugin({
      STATE: JSON.stringify('production')
    })
  ]
  // ... 做其它的优化
}) 

在生产环境的配置中可以使用相关的优化等等。。

最后在package.json的scripts配置脚本:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --config webpack.dev.conf.js",
    "build": "webpack --config webpack.prod.conf.js"
},

执行 npm run dev 就跑生产环境

执行 npm run build 就开发打包文件,生成在 dist目录下

笔记地址

Webpack4 学习笔记八 开发环境和生产环境配置的更多相关文章

  1. [学习笔记]Javaweb开发视频教程之Tomcat9配置

    参考自北京动力节点的视频教程:https://www.bilibili.com/video/av14548279/?p=1 1.Java XE Java SE 是做电脑上运行的软件. Java EE ...

  2. Django:学习笔记(1)——开发环境配置

    Django:学习笔记(1)——开发环境配置 Django的安装与配置 安装Django 首先,我们可以执行python -m django --version命令,查看是否已安装django. 如果 ...

  3. VSTO学习笔记(三) 开发Office 2010 64位COM加载项

    原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...

  4. 转 通过 spring 容器内建的 profile 功能实现开发环境、测试环境、生产环境配置自动切换

                                      软件开发的一般流程为工程师开发 -> 测试 -> 上线,因此就涉及到三个不同的环境,开发环境.测试环境以及生产环境,通常 ...

  5. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  6. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  7. webpack深入场景——开发环境和生产环境配置

    以前自己写一小项目时,webpack的配置基本就是一套配置,没有考虑生产环境和开发环境的区分,最近在做一个复杂的商城项目接触到了webpack的高级配置,经过两天的研究,写出了一份目前来说比叫满意的配 ...

  8. Learning ROS forRobotics Programming Second Edition学习笔记(八)indigo rviz gazebo

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  9. 项目开发过程中什么是开发环境、测试环境、生产环境、UAT环境、仿真环境?

    项目开发过程中什么是开发环境.测试环境.生产环境.UAT环境.仿真环境? 最近在公司项目开发过程中总用到测试环境,生产环境和UAT环境等,然而我对环境什么的并不是很理解它的意思,一直处于开发阶段,出于 ...

随机推荐

  1. Linux Process Management && Process Scheduling Principle

    目录 . 引言 . 进程优先级 . 进程的生命周 . 进程表示 . 进程管理相关的系统调用 . 进程调度 . 完全公平调度类 . 实时调度类 . 调度器增强 . 小结 1. 引言 在多处理器系统中,可 ...

  2. Java基础之访问文件与目录——创建目录(CreatingDirectories)

    控制台程序,使用两种方法来创建目录. import java.nio.file.*; import java.io.IOException; public class CreatingDirector ...

  3. ASP.NET Identity 用户注册相关设定

    此部分可以在 Web项目中的App_Start目录下的 IdentityConfig.cs 文件进行设置. 1.配置密码的验证逻辑 manager.PasswordValidator = new Pa ...

  4. C#中的线程(中)-线程同步

    1.同步要领 下面的表格列展了.NET对协调或同步线程动作的可用的工具:                       简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程 ...

  5. 【python3】如何建立爬虫代理ip池

    一.为什么需要建立爬虫代理ip池 在众多的网站防爬措施中,有一种是根据ip的访问频率进行限制的,在某段时间内,当某个ip的访问量达到一定的阀值时,该ip会被拉黑.在一段时间内被禁止访问. 这种时候,可 ...

  6. linux 下 ifcfg-ethx配置和解析

    网络接口配置文件[root@localhost ~]# cat /etc/sysconfig/network-scripts/ifcfg-eth0# Intel Corporation 82545EM ...

  7. 小程序前端防止重复点击请求api的简陋方法

    upload: function () { let that = this; let {uploadFlag} = that.data; if (that.data.uploadFlag) { ret ...

  8. C#中的 Stream

    目录: 什么是Stream? 什么是字节序列? Stream的构造函数 Stream的重要属性及方法 Stream的示例 Stream异步读写 Stream 和其子类的类图 本章总结 什么是Strea ...

  9. python+requests接口自动化完整项目设计源码

    前言 有很多小伙伴吵着要完整的项目源码,完整的项目属于公司内部的代码,这个是没法分享的,违反职业道德了,就算别人分享了,也只适用于本公司内部的业务. 所以用例的代码还是得自己去一个个写,我只能分享项目 ...

  10. Shell脚本编程实战一:创建按天备份的脚本工具

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/8241256.html 一:准备工作:创建归档目录 与  归档配置文件 归档目录:创建一个仓库目录,专门用于存放 ...