1 //此文件是开发环境下webpack相关配置
2 'use strict'
3 const utils = require('./utils')
4 const webpack = require('webpack')
5 const config = require('../config')
6 const merge = require('webpack-merge') //导入webpackage-merge 用来合并对象 去掉重复的属性
7 const path = require('path')
8 const baseWebpackConfig = require('./webpack.base.conf')
9 const CopyWebpackPlugin = require('copy-webpack-plugin') //导入copy-webpack-plugin 用来复制
10 const HtmlWebpackPlugin = require('html-webpack-plugin') //导入html-webpack-plugin 用来自动生成html
11 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') //导入friendily-errors-webpack-plugin 用来收集和展示错误日志
12 const portfinder = require('portfinder') //导入portfinder 用来获取port
13
14 // 主机
15 const HOST = process.env.HOST
16
17 // 端口
18 const PORT = process.env.PORT && Number(process.env.PORT)
19
20 // 合并
21 const devWebpackConfig = merge(baseWebpackConfig, {
22 mode: 'development',
23 module: {
24
25 //解析样式文件的规则
26 rules: utils.styleLoaders({
27 sourceMap: config.dev.cssSourceMap,
28 usePostCSS: true
29 })
30 },
31
32 // cheap-module-eval-source-map is faster for development
33 // 开发工具 用来调试
34 devtool: config.dev.devtool,
35
36
37 // 服务器 如需要请求本地数据时 需要在此块添加其他配置
38 // 这些 devServer 选项应该在 /config/index.js 中定制
39 devServer: {
40
41 //重新加载server,控制台以warning方式提示错误
42 clientLogLevel: 'warning',
43
44
45 //HTML5 history api时,任意的404可能需要被替代为index.html
46 historyApiFallback: {
47 rewrites: [{
48 from: /.*/,
49 to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
50 }, ],
51 },
52 hot: true, //启用热替换
53
54 contentBase: false, // 告诉服务器从哪里提供内容，只有在你想要提供静态文件时才需要，这里是禁用 ( since we use CopyWebpackPlugin. )
55
56 compress: true, //是否压缩
57 host: HOST || config.dev.host, //主机
58 port: PORT || config.dev.port, //端口
59 open: config.dev.autoOpenBrowser, //是否自动打开浏览器
60
61 // 编译出错时是否有提示
62 overlay: config.dev.errorOverlay ? {
63 warnings: false,
64 errors: true
65 } : false,
66
67 publicPath: config.dev.assetsPublicPath, //静态资源路径 此路径可在浏览器中打开
68 proxy: config.dev.proxyTable, //代理
69 quiet: true, // 启用quiet 意思是除了启动信息以外的任何信息都不会打印在控制台 （necessary for FriendlyErrorsPlugin）
70
71 // 监视文件的选项
72 watchOptions: {
73 poll: config.dev.poll,
74 }
75 },
76 plugins: [
77 // 自定义一个plugin 生成当前环境的一个变量
78 new webpack.DefinePlugin({
79 'process.env': require('../config/dev.env')
80 }),
81 new webpack.HotModuleReplacementPlugin(), //模块热替换插件 修改模块时不需要刷新页面
82
83 // https://github.com/ampedandwired/html-webpack-plugin
84 // 这是一个webpack插件，可以简化HTML文件的创建，从而为您的webpack bundle提供服务。这对于webpack bundle特别有用，因为它在文件名中包含一个哈希值，这会改变每次编译。你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或者使用你自己的加载器。
85 new HtmlWebpackPlugin({
86 filename: 'index.html',
87 template: 'index.html',
88 favicon: path.resolve(__dirname, '../static/images/favicon.ico'),
89 inject: true,
90 dll: (function () {
91 let max = 2
92 let res = []
93 for (let i = 0; i < max; i++) {
94 const dllName = require(path.resolve(__dirname, `../dllManifest/xuAdmin${i}-manifest.json`)).name.split('_')
95 res.push(`/static/dll/${dllName[0]}.${dllName[1]}.dll.js`)
96 }
97 return res
98 })()
99 }),
100 // 复制静态资源到开发环境的路径
101 new CopyWebpackPlugin([{
102 from: path.resolve(__dirname, '../static'),
103 to: config.dev.assetsSubDirectory,
104 ignore: ['.*']
105 }])
106 ]
107 })
108
109 // 导出
110 module.exports = new Promise((resolve, reject) => {
111 // 获取basePort
112 portfinder.basePort = process.env.PORT || config.dev.port
113 // 端口配置
114 portfinder.getPort((err, port) => {
115 if (err) {
116 reject(err)
117 } else {
118 process.env.PORT = port // 发布 e2e 测试所需的新端口
119 devWebpackConfig.devServer.port = port // 添加端口到 devServer 配置
120
121 // 添加友好提示(Add FriendlyErrorsPlugin)
122 devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
123 // 编译成功提示
124 compilationSuccessInfo: {
125 // 提示运行的组机和端口
126 messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
127 // 备注
128 notes: [` _ _ _ _ _ _ _ _ _ _
129 (c).-.(c) (c).-.(c) (c).-.(c) (c).-.(c) (c).-.(c)
130 / ._. \\ / ._. \\ / ._. \\ / ._. \\ / ._. \\
131 __\\( Z )/__ __\\( Y )/__ __\\( J )/__ __\\( B )/__ __\\( X )/__
132 (_.-/'-'\\-._)(_.-/'-'\\-._)(_.-/'-'\\-._)(_.-/'-'\\-._)(_.-/'-'\\-._)
133 || L || || O || || V || || E || || . ||
134 _.' \`-' '._ _.' \`-' '._ _.' \`-' '._ _.' \`-' '._ _.' \`-' '._ _.'
135 (.-./\`-'\\.-.)(.-./\`-'\\.-.)(.-./\`-'\\.-.)(.-./\`-'\\.-.)(.-./\`-'\\.-.)
136 \`-' \`-' \`-' \`-' \`-' \`-' \`-' \`-' \`-' \`-' `]
137 },
138 // 错误提示
139 onErrors: config.dev.notifyOnErrors ?
140 utils.createNotifierCallback() : undefined
141 }))
142
143 resolve(devWebpackConfig)
144 }
145 })
146 })
