webpack配置文件：webpack.config.js

1.webpack.config.js 和vue.config.js有什么区别
1.1 webpack.config.js是webpack的配置文件，所有使用webpack作为打包工具的项目都可以使用，vue的项目可以使用，react的项目也可以使用。
1.2 vue.config.js是vue项目的配置文件，专用于vue项目。通过vue.config.js中常用功能的配置，简化了配置工作，当然如果需要更专业的配置工作，webpack.config.js和vue.config.js在vue项目中是可以并存的。

2.webpack.config.js 文件内容
官方配置：

1. module.exports = {
   
2.   publicPath: './',//设置的就是域名根目录到项目文件根目录间的url。
   
3.   outputDir: 'motorway',//打包后生成的文件目录名
   
4.   assetsDir: 'static',//静态资源目录
   
5.   lintOnSave: process.env.NODE_ENV === 'development',//设置是否在开发环境下每次保存代码时都启用 eslint验证。
   
6.   productionSourceMap: false,//设置是否在开发环境下每次保存代码时都启用 eslint验证。
   
7.   indexPath: 'index.html',//用于设定打包生成的 index.html 文件的存储位置
   
8.   filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
   
9.   crossorigin: 'use-credentials',//
   
10.   
    
11.   // webpack配置
    
12.   configureWebpack: (config) => {
    
13.    // config为被解析的配置
    
14.     Object.assign(config, {
    
15.       // 开发生产共同配置，新增一些别名设置
    
16.       resolve: {
    
17.         alias: {
    
18.           '@': path.resolve(__dirname, './src'),
    
19.           '@c': path.resolve(__dirname, './src/components'),
    
20.           '@p': path.resolve(__dirname, './src/pages'),
    
21.           '@v': path.resolve(__dirname, './src/views'),
    
22.         } // 别名配置
    
23.       }
    
24.     })
    
25.   },
    
26.   //Webpack配置另一种写法—— webpack-chain（链式操作）。
    
27.   chainWebpack: config => {
    
28.     config.module
    
29.       .rule('vue')
    
30.       .use('vue-loader')
    
31.         .loader('vue-loader')
    
32.         .tap(options => {
    
33.           // 修改它的选项...
    
34.           return options
    
35.         })
    
36.   },
    
37.   //Webpack配置另一种写法—— end
    
38.   
    
39.   
    
40.   parallel: require('os').cpus().length > 1,// 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的       CPU 有多于一个内核时自动启用，仅作用于生产构建
    
41.   
    
42.   // css相关配置
    
43.   css: {
    
44.     extract: false, // 是否使用css分离插件 ExtractTextPlugin，一句话，css.extract用于控制是否强制分离vue 组件内的css。
    
45.     sourceMap: true, // 开启 CSS source maps
    
46.     // 因为配置了loaderOptions.css, 尽管requireModuleExtension的值为默认值，我们也需要指出
    
47.     requireModuleExtension: true,
    
48.     loaderOptions: {// 这里的选项会传递给 css-loader
    
49.           css: {
    
50.         // 配置 CSS Modules 的class命名规则
    
51.         modules: {
    
52.           localIdentName: '[local]_[hash:base64:8]'
    
53.         }
    
54.       },
    
55.       // 这里的选项会传递给 postcss-loader
    
56.       postcss: {
    
57.       },
    
58.       // 给 sass-loader 传递选项
    
59.       sass: {
    
60.         // @/ 是 src/ 的别名
    
61.         // 所以这里假设你有 `src/variables.sass` 这个文件
    
62.         // 注意：在 sass-loader v7 中，这个选项名是 "data"
    
63.         prependData: `@import "~@/variables.sass"`
    
64.       },
    
65.       // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
    
66.       // 因为 `scss` 语法在内部也是由 sass-loader 处理的
    
67.       // 但是在配置 `data` 选项的时候
    
68.       // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
    
69.       // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
    
70.       scss: {
    
71.         prependData: `@import "~@/variables.scss";`
    
72.       },
    
73.       // 给 less-loader 传递 Less.js 相关选项
    
74.       less:{
    
75.         // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
    
76.         // `primary` is global variables fields name
    
77.         globalVars: {
    
78.           primary: '#fff'
    
79.         }
    
80.       }
    
81.     }
    
82.     }
    
83.   },
    
84. 
    
85.   //通过devServer，可以在NodeJs架设起临时的服务器用于项目的运行与调试。
    
86.   devServer:
    
87.   {
    
88.     port: port,//指定要监听请求的端口号
    
89.     open: true,//用于设置 server 启动后是否自动打开浏览器
    
90.     openPage: '/different/page',//指定deserver 编译完成后自动打开的页面
    
91.     inline: true,//用于设置代码保存时是否自动刷新页面
    
92.     hot:true,//用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）
    
93.     host: '0.0.0.0',//用于指定devDerve使用的host。如果你希望服务器外部可以访问，设定如下：
    
94.     https:true,//用于设置是否启用https
    
95.     compress: true,//对devServer 所有服务启用 gzip 压缩。
    
96.     headers: {
    
97.       'X-Custom-Foo': 'bar'
    
98.     },//在所有响应中添加首部内容
    
99.    
    
100.     //当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。
     
101.     overlay: true,//设置一：显示编译器错误
     
102.     overlay: {//设置二：显示警告和错误
     
103.       warnings: false,
     
104.       errors: true
     
105.     },
     
106.    
     
107.     proxy: {//设置API访问代理。如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。
     
108.       [process.env.VUE_APP_BASE_API]: {
     
109.         target: `http://192.168.0.150:8082/uaf`,
     
110.         changeOrigin: true
     
111.       }
     
112.     }
     
113.   },
     
114.   

复制代码

1. let path = require('path'); // node 的 path 模块，可以获取当前目录位置
   
2. 
   
3. module.exports = {
   
4.   // 入口文件
   
5.   entry: './src/index.js',
   
6.   // 输出文件
   
7.   output: {
   
8.     // 输出文件名称
   
9.     filename: 'bundle.js',
   
10.     // filename: '[chunkhash].js'
    
11.     // 指定输出路径（绝对路径）__dirname 表示当前具体的目录
    
12.     // path.resolve()的作用是整合目录
    
13.     path: path.resolve(__dirname, 'dist'),
    
14.   },
    
15.     // 模式（development（开发） / production（生产））
    
16.     mode: 'development'
    
17. }

复制代码

2.1文件的入口，出口（entry可以是字符串,是数组或对象,入口可以有多个，出口只能有一个）

1. module.exports = {
   
2.     entry: './src/main.js', //打包文件入口
   
3.     output: {               //打包文件出口
   
4.         path: './dist',
   
5.         filename: 'bundle.js'
   
6.     }
   
7. }

复制代码

2.2默认打包方式, 开发模式 | production 生产模式

1.     //默认打包方式 开发模式 | production 生产模式
   
2.     mode:'development',

复制代码