• 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. javascript动态添加表格以及获取数据

    <script type="text/javascript"> var dict = { '百度': 'http://wwww.baidu.com', '新浪': 'h ...

  2. 解决python3缺少zlib的问题

    解决python3缺少zlib的问题 Table of Contents 1. 安装zlib 2. 重新编译安装python 3. 补充说明 在使用python3运行spark时,报缺少zlib的错误 ...

  3. mui 的注意事项点

    1.mui的subpage在微信浏览器中不能正常工作. 2.MUI支持json格式解析: 调用JSON.parse(data)或者JSON.stringify(data); 3.

  4. 转:如何利用已有的切片文件生成TPK

    Tpk是ArcGIS 10.1即将推出的一种新的数据文件类型,主要是用于将切片文件打包形成离线地图包.Tpk可以在ArcGIS Runtime中作为切片底图被加载.在ArcGIS 10.1中Tpk的生 ...

  5. head标签必不可少的元素

    <head> 标签用于定义文档的头部,它是所有头部元素的容器.<head> 中的元素可以引用脚本.指示浏览器在哪里找到样式表.提供元信息等等. 文档的头部描述了文档的各种属性和 ...

  6. Flask入门文件上传flask-uploads(八)

    1 视图传递多个参数 (1) 普通传参 : 关键字参数传递 return render_template('模板名称.html',arg1=val1,arg2=val2...) (2) 字典传参 : ...

  7. installed_oracle_can't_use

    Preface 1.my server is windowsxp 2.database is the oralce 10g step A.CHECK SERVER 1.win + r cmd sqlp ...

  8. 【java开发系列】—— Tomcat编译报错

    由于之前Eclipse里面有一个可移植性的web工程,但是在我很久没用后,再次登录这个IDE的时候就发现了问题. 首先,我的电脑里面有两个版本的JDK,1.6和1.7.两个版本的Tomcat6和7以及 ...

  9. 实验:将系统进程映射移到 Python 字典中

    参考官方文档,测试下列代码,把oracle的进程映射到python的字典中: [oracle@ycr python]$ more pro_get.py import reimport subproce ...

  10. mysql:删除表数据drop、truncate和delete的用法

    程度从强到弱 1.drop  table tb        drop将表格直接删除,没有办法找回 2.truncate (table) tb       删除表中的所有数据,不能与where一起使用 ...