vue-cli中配置webpack系列文章六 ------ webpack.dev.conf.js

dreamtecher 发布于2019-08-26 13:50 / 464人阅读

摘要：将热重载的相关配置放入的每一项中，达到每一个文件都可以实现热重载的目的这样中选项就变成了如下调用方法，将基础设置与开发设置进行合并的作用类似于少则添加，同则覆盖在开发环境下生成，便于调试但是官方说的相对路径有一个，所以暂

webpack.dev.conf.js

  var utils = require("./utils")
  var webpack = require("webpack")
  var config = require("../config")
  var merge = require("webpack-merge")
  var baseWebpackConfig = require("./webpack.base.conf")
  var HtmlWebpackPlugin = require("html-webpack-plugin")
  var FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin")
  // 将热重载的相关配置放入entry的每一项中，达到每一个文件都可以实现热重载的目的
  // 这样webpack.base.conf.js中entry选项就变成了如下：
  // entry: {
  //    app: ["./src/main.js", "./build/dev-client"]
  //  }
  Object.keys(baseWebpackConfig.entry).forEach(function(name) {
    baseWebpackConfig.entry[name] = ["./build/dev-client"].concat(baseWebpackConfig.entry[name])
  })
  // 调用webpack-merge方法，将基础设置与开发设置进行合并
  // webpack-merge的作用类似于extend：少则添加，同则覆盖
  module.exports = merge(baseWebpackConfig, {
    module: {
      // 在开发环境下生成cssSourceMap，便于调试（但是官方说cssSourceMap的相对路径有一个bug，所以暂时将其关闭了）
      rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
    },
    // 配置Source Maps 在开发中使用cheap-module-eval-source-map更快
    devtool: "#cheap-module-eval-source-map",
    plugins: [
      // DefinePlugin可以为webpack提供一个在编译时可以配置的全局常量
      // 在这里我们可以通过"process.env"这个全局变量的值来判定所处的环境
      new webpack.DefinePlugin({
        "process.env": config.dev.env
      }),
      new webpack.HotModuleReplacementPlugin(),
      // 页面中的报错不会阻塞编译，但是会在编译结束后报错
      new webpack.NoEmitOnErrorsPlugin(),
      new HtmlWebpackPlugin({
        filename: "index.html",
        template: "index.html",
        inject: true
      }),
      new FriendlyErrorsPlugin()
    ]
  })

GPU云服务器云服务器 webpack cdn配置 webpack配置cdn webpack常用配置项如何批量替换wordpress文章中的文

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109648.html

vue-cli解析

摘要：在中，设置了一些配置，代码如下通过它的注释，我们可以理解它在中配置了静态路径本地服务器配置项等参数。下面还有一个的对象，它是在本地服务器启动时，打包的一些配置，代码如下其中包括模版文件的修改，打包完目录之后的一些路径设置，压缩等。前言这段时间，算是空出手来写几篇文章了。由于很久都没有时间整理现在所用的东西了，所以，接下来会慢慢整理出一些文档来记录前段时间的工作和生活。这篇文章的主...

KunMinX 2019-08-21 18:24 评论0 收藏0
vue学习系列（二）vue-cli

摘要：一介绍是官方提供的脚手架，用来快速建立项目。标识项目名称，这个你可以根据自己的项目来起名字。初始化完成之后，进入安装目录，必须先安装项目依赖，否则无法运行。源文件需要注意的是是入口文件，下的是路由文件，文件是组件文件。一.介绍 vue-cli是官方提供的脚手架，用来快速建立项目。二.安装 npm install vue-cli -g//全局安装三.初始化项目 vue init ...

baishancloud 2019-08-26 11:50 评论0 收藏0
vue-cli中配置webpack系列文章八 ------ 工程常用配置

摘要：根据模板插入等生成最终生成的存放路径，相对于的路径模板路径插入的位置，路径设置属性，属性值是所在的路径。配置后，在使用时将不再需要和进行引入，直接使用即可。一 webpack.base.conf.js 1. entry 为入口文件 1.1 在此可以绑定 babel 垫片处理ie兼容 1.2 我们大部分为单页面应用（SPA），配置多页面也可以在此配置 2. resol...

netScorpion 2019-08-26 13:51 评论0 收藏0
vue单页多页的开发环境配置+vue的开发思路

摘要：多个单页应用整合的工程的开发环境工程的目录设置本文内容的工程的目录设计基于的多个单页应用的开发环境搭建目录一开发环境使用二需求分析三开发思路四目录设计及思路五开发环境开发六整个开发环境的目录注释一开发环境使用多终端页面路径设置 vue-multi-device-single-page 多个单页应用整合的vue工程的开发环境vue工程的目录设置 showImg(https://segme...

cnio 2019-08-20 16:48 评论0 收藏0
Vue-cli 命令行工具分析

摘要：文章来源命令行工具分析命令行工具分析提供一个官方命令行工具，可用于快速搭建大型单页应用。其他模式的配置文件以此为基础通过合并。文章来源：Vue-cli 命令行工具分析 Vue-cli 命令行工具分析 Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。vue-webpack-boilerplate，官方定义为： full-featured Webpack setup ...

LoftySoul 2019-08-21 17:44 评论0 收藏0