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 文件内容
2.1文件的入口，出口（entry可以是字符串,是数组或对象,入口可以有多个，出口只能有一个）
module.exports = {
entry: './src/main.js', //打包文件入口
output: { //打包文件出口
path: './dist',
filename: 'bundle.js'
}
}
2.2 loader( 可以使你在 import 或 "load(加载)" 模块时预处理文件)loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 [模块]以供应用程序使用，以及被添加到依赖图中。
例如：加载css文件 ----- css-loader
将ts转为js ----- ts-loader
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' },
],
},
};
2.3 plugins 插件
html-webpack-plugin
功能：把打包好的文件自动引入到入口文件 index.html 文件中
安装：npm install html-webpack-plugin -D
在 webpack.config.js 中引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 配置
plugins:[
new HtmlWebpackPlugin({
// 默许指定 模板的路径 否则会篡改网页 title
template: resolve('public/index.html')
})
]
可以动态的引入js,因为每次打包后的js hash值可能不一样，它可以根据具体的hash值，引入js
const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
title: 'czklove',
filename: 'index.html',
chunks: '[name].bundle[hash].js'
})
]
clean-webpack-plugin
功能：在每次打包时，先删除上次生成的文件
安装：npm install clean-webpack-plugin -D
在 webpack.config.js 中引入
const CleanWebpakPlugin = require('clean-webpack-plugin');
// 配置
plugins:[
new HtmlWebpackPlugin({
// 默许指定 模板的路径 否则会篡改网页 title
template: resolve('public/index.html')
}),
// 必须指定路径，是数组，可指定多个路径
new CleanWebpakPlugin(['dist'])
]
HotModuleReplacementPlugin 模块热替换插件
webpack 内置插件，可以简单配置就能用。功能，就是提供保存后，页面刷新修改内容
new webpack.HotModuleReplacementPlugin()
uglifyjs-webpack-plugin 压缩插件 开启js,css压缩
new UglifyJsPlugin({
test:/\.js$|\.html$.\css/, //匹配文件名
threshold:10240,//对超过10K的数据进行压缩
deleteOriginalAssets:false,//不删除源文件
}),
最最重要的插件，SplitChunksPlugin ,代码分割插件
optimization: {
splitChunks: {
chunks: 'initial', // 分割方式 ："initial" 初始化，"all"(默认就是all)，"async"（动态加载）
minSize: 30000,// 形成一个新代码块最小的体积,只有 >= minSize 的bundle会被拆分出来
minChunks: 1, //引入次数，如果为2 那么一个资源最少被引用两次才可以被拆分出来
maxAsyncRequests: 5, // 按需加载的最大并行请求数
maxInitialRequests: 3, // 一个入口最大并行请求数
automaticNameDelimiter: '~', // 分割后的名字用什么符号链接,文件名的连接符
name: true,
cacheGroups: { //缓存组
venxx: {
test: /vue/,
name: 'vuevendors'
},
vendors: {
test: /jquery/,
name: 'jqueryvendors'
}
}
}
}
主要用途
1.做代码分割，默认是将所以的异步引入单独打包，如常见的Vue异步路由组件
2.将不常改变的模块代码单独打包，这样更有利于浏览器的缓存处理，如将vue vuex vue-router, ui库，这些都是不常改变
3.将业务代码单独打包，这是经常改变的
4.异步模块代码单独打包，做预加载处理，加快首页加载速度
如果项目过大，打包事件过长，可以考虑使用HappyPack 插件，开启多进程打包（不是多线程，js是单线程的）
plugins: [
new HappyPack({
id: 'babel', // 与loader 配置项对应
threads: 4, // 开启多少个进程
loaders: ['babel-loader'] //用什么loader处理
})
]
all: 不管文件是动态还是非动态载入，统一将文件分离。当页面首次载入会引入所有的包
async： 将异步加载的文件分离，首次一般不引入，到需要异步引入的组件才会引入。
initial：将异步和非异步的文件分离，如果一个文件被异步引入也被非异步引入，那它会被打包两次（注意和all区别），用于分离页面首次需要加载的包。
2.4 resolve
自动解析确定的扩展。默认值为：
module.exports = {
//...
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json']
}
}
能够使用户在引入模块时不带扩展：
import File from '../path/to/file';
如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索：
如下配置会导致webpack在查找模块时候，先去src目录下找，如果没有找到会去node_modules下查找
module.exports = {
//...
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules']
}
};
2.5 externals
当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：
externals: {
"jquery": "jQuery"
}
