vue--webpack打包

前言：webpack（很难，没有一定的vue基础，勿学）
一，定义：js模块打包器把所有依赖的文件生成一个图，打包成文件
二，安装：
1.npm init -y初始化项目
2.npm i webpack webpack-cli -D安装
三，配置文件webpack.config.js module.exports = {}
四，核心概念
1.入口 entry

2.出口output：(path 文件地址，path:__dirname+"/dist"；文件名 filename)。

3.plugin：在webpack 的运行过程中(运行过程（生命周期）)做一些额外操作处理模板，清理。

4.loader：加载器webpack默认只能够处理js文件，loader把非js文件转换为webpack可以处理的模块。

5.模式mode：production 产品、development开发

6.本地服务器：`dev Server

npm i webpack-dev-server -D
devServer:{

open:true,//自动打开浏览器
host:“localhost”,域名
port:8080 端口号
hot:true 热更新
}`

五，loader

1：css-loader 处理css文件
2：style-loader把css插入到header
3：less-loader处理.less
4：MiniCssExtractPlugin.loader压缩抽出css-loader
5：file-loader处理文件，图片
6：url-loader当文件比较小转成base64减少一http请求）
7：image-webpack图片压缩
六，优化

1：css优化压缩css-minimizer-webpack-plugin

2：图片优化mage-webapck压缩图片、file-loader，base64格式

3：js优化压缩terser-webpack-plugin

 optimization: {
  minimizer: [
 new CssMinimizerPlugin(),
 new TerserWebpackPlugin(),]},

4：devtool与sourceMap

5：异步加载	import(xxx).then()

6：预加载import(/* webpackPrefetch: true  */ 'jquery')

7：hash命名 --01：hash ;02--chunkhash如果入口发生变化就会发生变化；03--contenthash如果内容发生变化名称发生变化

8：tree shaking摇树

9：按需导入js借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

10：splitChunks代码分包
	optimization: {
    splitChunks: {
    chunks: "all", 
    // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件}}, 
    
11：别名resolve: {
alias: {
  '@': path.resolve(__dirname, './src'), //设置@为src目录的别名
}},

12：静态目录
new CopyWebpackPlugin(  // 设置静态目录（拷贝文件到另外一个文件夹）
{patterns:[  
// { from: __dirname+'/public', to: __dirname+'/dist' },
//from 从， to 到 __dirname 当前目录
{ from: __dirname+'/src/static', to: __dirname+'/dist/static' },
], }),

七，多入口打包

entry: {
  vue: './src/main.js',
  base: './src/index.js'
},
new HtmlWebpackPlugin({
  // 指定模板文件
  filename: 'index.html',
  template: './public/index.html',
  chunks: ['vue'], //指定vue入口打包进来
}),
new HtmlWebpackPlugin({
  filename: 'base.html',
  template: './public/base.html',
  chunks:['base'], //指定base入口打包
}),