手撕vue-cli配置——webpack.dev.conf.js篇

const utils = require(‘./utils‘)
const webpack = require(‘webpack‘)
const config = require(‘../config‘)
const merge = require(‘webpack-merge‘)
const path = require(‘path‘)
const baseWebpackConfig = require(‘./webpack.base.conf‘)
//一个拷贝资源的插件,后面我会介绍用法
const CopyWebpackPlugin = require(‘copy-webpack-plugin‘)
//生成html模板的插件,一个经常用到的wbepack插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
//一个更友好展示错误日志的插件
const FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin‘)
//一个自动打开可用端口的包
const portfinder = require(‘portfinder‘)
//当前环境的host
const HOST = process.env.HOST
//当前环境的port
const PORT = process.env.PORT && Number(process.env.PORT)

//开发环境的配置
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    //loader的配置,具体内容可以参考utils文件
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  devServer: {
     //重新加载server时,控制台对一些错误以warning的方式提示
    clientLogLevel: ‘warning‘,
    //当使用 HTML5 History API 时,任意的 404 响应都可能需要被替代为 index.html
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, ‘index.html‘) },
      ],
    },
    //启用 webpack 的模块热替换特性
    hot: true,
    //告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要,这里我们禁用
    contentBase: false,
    //是否压缩
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    //是否自动打开浏览器
    open: config.dev.autoOpenBrowser,
    //编译出错时是否有提示
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    //静态内容的路径,此路径下的打包文件可在浏览器中访问
    publicPath: config.dev.assetsPublicPath,
    //接口的代理
    proxy: config.dev.proxyTable,
    //启用 quiet 后,除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。
    quiet: true, // necessary for FriendlyErrorsPlugin
    //监视文件的选项
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    //DefinePlugin 允许创建一个在编译时可以配置的全局常量。这里生成了一个当前环境的常量
    new webpack.DefinePlugin({
      ‘process.env‘: require(‘../config/dev.env‘)
    }),
    //模块热替换插件,修改模块时不需要刷新页面
    new webpack.HotModuleReplacementPlugin(),
    //当开启 HMR 的时候使用该插件会显示模块的相对路径
    new webpack.NamedModulesPlugin(),
    //在编译出现错误时,使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      filename: ‘index.html‘,
      template: ‘index.html‘,
      //打包后js文件放在body的最后
      inject: true
    }),
    //将static的内容拷贝到开发路径,忽略这个文件夹下“.XX”的文件
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, ‘../static‘),
        to: config.dev.assetsSubDirectory,
        ignore: [‘.*‘]
      }
    ])
  ]
})

原文地址:https://www.cnblogs.com/caideyipi/p/8442932.html

时间: 2024-10-08 00:02:50

手撕vue-cli配置——webpack.dev.conf.js篇的相关文章

vue2.0配置webpack.dev.conf.js加载本地json数据

打开webpack.dev.conf.js 在const portfinder = require('portfinder')后加入以下配置 1 const express = require('express') 2 const app = express() // 请求server 3 var appData = require('../data.json') //加载本地数据 4 var seller = appData.seller //获取对应的数据 5 var goods = app

vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpack-template 中已经去掉了dev-server.js,取而代之的是webpack.dev.conf.js文件,所以可以在webpack.dev.conf.js里配置本地访问. 对比旧版本的build文件夹,新版本的build下少了dev-server.js和dev-client.js 旧版

vue - webpack.dev.conf.js

1 'use strict' 2 3 // build/util.js 4 const utils = require('./utils') 5 // node_modules里面的webpack 6 const webpack = require('webpack') 7 // config/index.js 8 const config = require('../config') 9 // 对象合并 10 const merge = require('webpack-merge') 11

vue - webpack.dev.conf.js for merge

webpack-merge提供了一个merge连接数组并合并创建新对象的对象的函数.如果遇到函数,它将执行它们,通过算法运行结果,然后再次将返回的值包装在函数中. 这种行为在配置webpack时特别有用,尽管它有超出它的用途.无论何时需要合并配置对象,webpack-merge都可以派上用场. 栗子: 1 const devWebpackConfig = merge(baseWebpackConfig, { 2 module: { 3 rules: utils.styleLoaders({ so

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') // 一个用于生成HTML文件并自动注入依赖文件(link/script)的webpack插

vue - webpack.dev.conf.js for HtmlWebpackPlugin

描述: 这是一个webpack插件,可以简化HTML文件的创建,为您的webpack捆绑服务提供服务. 这对于webpack包含文件名中包含哈希值的bundle 来说尤其有用,它会更改每个编译. 您可以让插件为您生成HTML文件,使用lodash模板提供您自己的模板或使用您自己的加载器. 官网:https://www.npmjs.com/package/html-webpack-plugin 原文地址:https://www.cnblogs.com/cisum/p/9612459.html

vue - webpack.dev.conf.js for FriendlyErrorsPlugin

描述:webpack网页端友好的报错信息就来自它 官网:https://www.npmjs.com/package/friendly-errors-webpack-plugin 1 new FriendlyErrorsPlugin({ 2 // 运行成功 3 compilationSuccessInfo:{ 4 message:['你的应用程序在这里运行http:// localhost:3000'], 5 notes:['有些附加说明要在成功编辑时显示'] 6 }, 7 // 运行错误 8 o

[email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

解决方案: 1.试一下 卸载npm uninstall webpack-dev-server,在安装这个npm i [email protected] 2.删除node_modules目录,使用npm install,不要用cnpm,npm也是可以设置成淘宝镜像的,cnpm有时候用起来会有很多问题,无名无故的安装些多余的东西. 原文地址:https://www.cnblogs.com/rachelch/p/8979403.html

vue - webpack.base.conf.js

描述:webapck基本配置文件. 为了给开发文件和打包文件(webpack.dev.conf.js|| webpack.prod.conf.js) 提供方便. 1 'use strict' 2 // 路径 3 const path = require('path') 4 // build/utils.js 5 const utils = require('./utils') 6 // config/index.js 7 const config = require('../config') 8