3.webpack4 环境配置,错误映射,监听,跨域解决,设置别名,常用小插件简单使用

萌新自己学习webpack做的简单配置,如有错误请多包含,也可指点,谢谢.

写在开头

# source-map查错

# watch监听 

# 小插件
# cleanWebpackPlugin  
# 每次生成代码之前,先将dist(打包文件目录)目录清空
# copyWebpackPlugin
# 将项目中的某单个文件或整个文件夹在打包的时候复制一份到打包后的文件夹中
# bannerPlugin  内置插件

# 跨域 devServer使用三种方法解决跨域问题

# resolve
# 配置需要解析的包的目录 
# 配置别名
# 配置引入文件时查找的后缀名顺序,默认为查找js文件

# 环境变量
# 使用webpack内置插件配置生产环境和本地环境所需要的环境变量

完整配置在最下方

source-map查错

  // 1) 源码映射,会单独生成一个map文件 会标识当前报错的列和行
  // devtool: 'source-map',  //  增加映射文件 帮助调试源代码
  // 2) 不会生成map格式的文件，包含映射关系的代码会放在打包后生成的代码中
  devtool: 'eval-source-map',
  // 3) 将错误只定位到行，不定位到列。映射业务代码，不映射loader和第三方库等。
  // 提升打包构建的速度。
  // devtool: 'cheap-module-source-map',
  // 4) 将错误只定位到行，不定位到列。会映射loader和第三方库
  // devtool: 'cheap-module-eval-source-map',
  // 5) 用eval的方式生成映射关系代码，效率和性能最佳。
  // 但是当代码复杂时，提示信息可能不精确。
  // devtool: 'eval',
  // 开发环境推荐
  // devtool: 'cheap-module-eval-source-map',

watch监听

  watch: true, // 代码变化后事实打包
  watchOptions: {
    // 监控的选项
    poll: 1000, // 每秒查看1000次是否需要打包
    aggregateTimeout: 500, // 防抖 停止操作500毫秒后打包
    ignored: /node_modules/, // 不需要监控的文件夹
  },

小插件

# cleanWebpackPlugin  
# 每次生成代码之前,先将dist(打包文件目录)目录清空
# copyWebpackPlugin
# 将项目中的某单个文件或整个文件夹在打包的时候复制一份到打包后的文件夹中
# bannerPlugin  内置插件

    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
   
      patterns: [{
   
        from: './static',
        to: 'static'
      }, ],
    }),
    new webpack.BannerPlugin('最终版权归署为kirito所有'),

跨域

  devServer: {
    
    // 1) 跨域解决 代理转发
    proxy: {
   
      "/api": "http://localhost:3000",
      pathRewrite: {
   
        "^/api": "/api"
      }
    }
    // 2) 模拟数据
    // before(app){ // 提供的内置方法 钩子函数 在启动时会创建一个接口 则没有跨域问题
    //   app.get('/api/user', (req, res) => res.json({
   
    //     name: 'kirito-before'
    //   }))