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 // 路径 12 const path = require(‘path‘) 13 ?14 ?15 // 引入webpack.base.conf.js配置 16 const baseWebpackConfig = require(‘./webpack.base.conf‘) 17 const CopyWebpackPlugin = require(‘copy-webpack-plugin‘) 18 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) 19 const FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin‘) 20 const portfinder = require(‘portfinder‘) 21 ?22 // 配置 23 const HOST = process.env.HOST 24 const PORT = process.env.PORT && Number(process.env.PORT) 25 ?26 const devWebpackConfig = merge(baseWebpackConfig, { 27 ??module: { 28 ????rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 29 ??}, 30 ??// cheap-module-eval-source-map开发速度更快(只检测修改了的文件进行更新，而不是全部) 31 ??devtool: config.dev.devtool, 32 ?33 ??/** 34 ???* ?这里配置开发服务器 35 ???*/ 36 ??devServer: { 37 ????clientLogLevel: ‘warning‘, 38 ????historyApiFallback: { 39 ??????rewrites: [ 40 ????????{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, ‘index.html‘) }, 41 ??????], 42 ????}, 43 ????// 是否开启HMR 44 ????hot: true, 45 ????// 内容 46 ????contentBase: false, // 因为我们使用CopyWebpackPlugin 47 ????// 是否压缩 48 ????compress: true, 49 ?50 ????host: HOST || config.dev.host, 51 ????port: PORT || config.dev.port, 52 ?53 ????// config => config/index.js 54 ????open: config.dev.autoOpenBrowser, 55 ?56 ????overlay: config.dev.errorOverlay 57 ??????? { warnings: false, errors: true } 58 ??????: false, 59 ????publicPath: config.dev.assetsPublicPath, 60 ????proxy: config.dev.proxyTable, 61 ????// 如果不开启，则不提示友好的错误信息！ 62 ????quiet: true, // FriendlyErrorsPlugin所必需的 63 ????watchOptions: { 64 ??????poll: config.dev.poll, 65 ????} 66 ??}, 67 ?68 ??/** 69 ???* 配置插件 70 ???*/ 71 ??plugins: [ 72 ????new webpack.DefinePlugin({ 73 ??????‘process.env‘: require(‘../config/dev.env‘) 74 ????}), 75 ????new webpack.HotModuleReplacementPlugin(), 76 ????new webpack.NamedModulesPlugin(), // HMR在更新时在控制台中显示正确的文件名。 77 ????new webpack.NoEmitOnErrorsPlugin(), 78 ????// https://github.com/ampedandwired/html-webpack-plugin 79 ????new HtmlWebpackPlugin({ 80 ??????filename: ‘index.html‘, 81 ??????template: ‘index.html‘, 82 ??????inject: true 83 ????}), 84 ????// 复制到自定义静态源 85 ????new CopyWebpackPlugin([ 86 ??????{ 87 ????????// 来自(可以是对象，可以是String) 88 ????????from: path.resolve(__dirname, ‘../static‘), 89 ????????// 走向(可以是对象，可以是String) 90 ????????to: config.dev.assetsSubDirectory, 91 ????????// 忽略此类文件 92 ????????ignore: [‘.*‘] 93 ??????} 94 ????]) 95 ??] 96 }) 97 ?98 /** 99 ?* 模块导出(Promise)100 ?*/101 module.exports = new Promise((resolve, reject) => {102 ??portfinder.basePort = process.env.PORT || config.dev.port103 ??portfinder.getPort((err, port) => {104 105 ????if (err) {106 ??????reject(err)107 ????} else {108 ??????// 发布新的端口，这是e2e测试所必需的109 ??????process.env.PORT = port110 ??????// 添加开发服务器到端口地址111 ??????devWebpackConfig.devServer.port = port112 113 ??????// 添加 FriendlyErrorsPlugin114 ??????devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({115 ????????compilationSuccessInfo: {116 ??????????messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],117 ????????},118 ????????onErrors: config.dev.notifyOnErrors119 ??????????? utils.createNotifierCallback()120 ??????????: undefined121 ??????}))122 123 ??????resolve(devWebpackConfig)124 ????}125 ??})126 })