webpack.config.js(详解)

module.exports = {
  publicPath: './',//设置的就是域名根目录到项目文件根目录间的url。
  outputDir: 'motorway',//打包后生成的文件目录名
  assetsDir: 'static',//静态资源目录
  lintOnSave: process.env.NODE_ENV === 'development',//设置是否在开发环境下每次保存代码时都启用 eslint验证。
  productionSourceMap: false,//设置是否在开发环境下每次保存代码时都启用 eslint验证。
  indexPath: 'index.html',//用于设定打包生成的 index.html 文件的存储位置
  filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  crossorigin: 'use-credentials',//
  
  // webpack配置
  configureWebpack: (config) => {
   // config为被解析的配置
    Object.assign(config, {
      // 开发生产共同配置，新增一些别名设置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/pages'),
          '@v': path.resolve(__dirname, './src/views'),
        } // 别名配置
      }
    })
  },
  //Webpack配置另一种写法—— webpack-chain（链式操作）。
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  },
  //Webpack配置另一种写法—— end
  
  
  parallel: require('os').cpus().length > 1,// 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的       CPU 有多于一个内核时自动启用，仅作用于生产构建
  
  // css相关配置
  css: {
    extract: false, // 是否使用css分离插件 ExtractTextPlugin，一句话，css.extract用于控制是否强制分离vue 组件内的css。
    sourceMap: true, // 开启 CSS source maps
    // 因为配置了loaderOptions.css, 尽管requireModuleExtension的值为默认值，我们也需要指出
    requireModuleExtension: true,
    loaderOptions: {// 这里的选项会传递给 css-loader
	  css: {
        // 配置 CSS Modules 的class命名规则
        modules: {
          localIdentName: '[local]_[hash:base64:8]'
        }
      },
      // 这里的选项会传递给 postcss-loader
      postcss: {
      },
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v7 中，这个选项名是 "data"
        prependData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `data` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        prependData: `@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
    }
  },

  //通过devServer，可以在NodeJs架设起临时的服务器用于项目的运行与调试。
  devServer: 
  {
    port: port,//指定要监听请求的端口号
    open: true,//用于设置 server 启动后是否自动打开浏览器
    openPage: '/different/page',//指定deserver 编译完成后自动打开的页面
    inline: true,//用于设置代码保存时是否自动刷新页面
    hot:true,//用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）
    host: '0.0.0.0',//用于指定devDerve使用的host。如果你希望服务器外部可以访问，设定如下：
    https:true,//用于设置是否启用https
    compress: true,//对devServer 所有服务启用 gzip 压缩。
    headers: {
      'X-Custom-Foo': 'bar'
    },//在所有响应中添加首部内容
    
    //当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。
    overlay: true,//设置一：显示编译器错误
    overlay: {//设置二：显示警告和错误
      warnings: false,
      errors: true
    },
    
    proxy: {//设置API访问代理。如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。
      [process.env.VUE_APP_BASE_API]: {
        target: `http://192.168.0.150:8082/uaf`,
        changeOrigin: true
      }
    }
  },