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 文件内容
官方配置：

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
}
}
},

复制代码

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

复制代码

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

module.exports = {
entry: './src/main.js', //打包文件入口
output: { //打包文件出口
path: './dist',
filename: 'bundle.js'
}
}

复制代码

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

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

复制代码