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