const path = require('path') const utils = require('./utils') const webpack = require('webpack') const config = require('../config') //通过webpack-merge实现webpack.dev.conf.js对wepack.base.config.js的继承 const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.conf') const HtmlWebpackPlugin = require('html-webpack-plugin') //美化webpack的错误信息和日志的插件 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') // 查看空闲端口位置，默认情况下搜索8000这个端口 const portfinder = require('portfinder') // processs为node的一个全局对象获取当前程序的环境变量，即host const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT) function resolveApp(relativePath) { return path.resolve(relativePath); } const devWebpackConfig = merge(baseWebpackConfig, { module: { //规则是工具utils中处理出来的styleLoaders，生成了css，less,postcss等规则 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, // 增强调试 devtool: config.dev.devtool, // 此处的配置都是在config的index.js中设定好了 devServer: { //控制台显示的选项有none, error, warning 或者 info clientLogLevel: 'warning', //使用 HTML5 History API historyApiFallback: true, hot: true, //热加载 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: true, //控制台是否禁止打印警告和错误,若用FriendlyErrorsPlugin 此处为 true watchOptions: { poll: config.dev.poll, // 文件系统检测改动 } }, plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(),//模块热替换插件，修改模块时不需要刷新页面 new webpack.NamedModulesPlugin(), // 显示文件的正确名字 new webpack.NoEmitOnErrorsPlugin(), //当webpack编译错误的时候，来中端打包进程，防止错误代码打包到文件中 // https://github.com/ampedandwired/html-webpack-plugin // 该插件可自动生成一个 html5 文件或使用模板文件将编译好的代码注入进去 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, chunks: ['app'] }), new HtmlWebpackPlugin({ filename: 'login.html', template: 'login.html', inject: true, chunks: ['login'] }), new HtmlWebpackPlugin({ filename: 'license.html', template: 'license.html', inject: true, chunks: ['license'] }), new HtmlWebpackPlugin({ filename: 'licenses.html', template: 'licenses.html', inject: true, chunks: [] }), new HtmlWebpackPlugin({ filename: '404.html', template: path.resolve(__dirname, '../errors/404.html'), favicon: resolveApp('favicon.ico'), inject: true, chunks: [] }), new HtmlWebpackPlugin({ filename: '403.html', template: path.resolve(__dirname, '../errors/403.html'), favicon: resolveApp('favicon.ico'), inject: true, chunks: [] }), new HtmlWebpackPlugin({ filename: '500.html', template: path.resolve(__dirname, '../errors/500.html'), favicon: resolveApp('favicon.ico'), inject: true, chunks: [] }) ] }) module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port //查找端口号 portfinder.getPort((err, port) => { if (err) { reject(err) } else { //端口被占用时就重新设置evn和devServer的端口 process.env.PORT = port // add port to devServer config devWebpackConfig.devServer.port = port //友好地输出信息 devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ compilationSuccessInfo: { messages: [`Your application is running here: ${devWebpackConfig.devServer.host}:${port}`], }, onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined })) resolve(devWebpackConfig) } }) })
webpack.prod.conf.js