webpack打包资源笔记

webpack打包步骤：

1.新建一个文件夹，在vscode编译软件中，右击新建文件夹，打开终端命令。然后输入npm init初始化包名

2.然后下载npm i webpack webpack-cli -g进行全局安装

3.然后在下载npm i webpack webpack-cli -D进行本地安装

//运行指令：
//开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
//由于版本问题，新版打包环境指令改为：webpack --entry ./src/index.js -o ./build --mode=development
//生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
//webpack --entry ./src/index.js -o ./build --mode=production
//结论：
//1.webpack能处理js和json文件，但不能处理css/img等其他资源
//2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
//2.生产环境比开发环境多一个压缩js的代码
// 利用ES6导入data.json文件数据

4.在新建的文件夹里面，新建src文件夹，用来存储静态资源（index.js,index.html,data.json）等文件

1.怎么打包

vue cli脚手架提供的打包命令
npm run build
将src下的文件打包，也会包括node_modules里面的三方包

2.如何测试dist包

要查看dist包的内容，需要将dist放到http服务中
http服务器：iis,nginx,apache,node服务（serve）
npm install -g serve
serve dist

3.项目部署位置

是一个单独的项目？
还是一个已有的子项目，子级域名
已经有线上项目，http://www.baidu.com
子项目：http://www.baidu.com/exam

具体实现步骤：

在vue.config.js中写
module.exports={
    publicPath:'/exam',
    outputDir:'dist/exam'
}

4.用户提出Bug太慢（首屏加载慢）

a.文件压缩compressionWebpackPlugin插件
   cnpm i -D compression-webpack-plugin
   在vue.config.js文件中配置gizp压缩
   //引入CompressionWebpackPlugin压缩插件
   const CompressionWebpackPlugin = require("compression-webpack-plugin");
   //在module.exports对象中配置：
   //配置webpack
  configureWebpack:{
    plugins:[
      new CompressionWebpackPlugin({
        algorithm:'gzip',//压缩方式
        test:/\.js$|.css$/,//.js结尾和.css结尾的文件需要压缩
        threshold:10240 //多大可以压缩，单位是bit 10kb
      })
    ]
  }
b.使用cdn优化，将原本从网站下载的第三方包走cdn下载
c.打包不需要将三方包打入，要排除，打包的文件就小了
具体代码：在vue.config.js中：externals排除第三方包
const { defineConfig } = require('@vue/cli-service')
const CompressionWebpackPlugin = require("compression-webpack-plugin")
module.exports = defineConfig({
  transpileDependencies: true,
  //所以资源路径前缀
  publicPath:'/exam',
  //输出目录
  outputDir:'dist/exam',
  //配置webpack
  configureWebpack:{
    //排除第三方包
    externals:{
      vue:'Vue',
      "element-ui":'ELEMENT' //其中ELEMENT这个名称取决于你引用cdn.js文件的全局变量
      // 'element-ui': 'ElementUI',
    },
    plugins:[
      new CompressionWebpackPlugin({
        algorithm:'gzip',//压缩方式
        test:/\.js$|\.css$/,//.js结尾和.css结尾的文件需要压缩
        threshold:10240 //多大可以压缩，单位是bit 10kb
      })
    ]
  }
})
d.bootcdn
在public文件夹中因此cdn,vue的链接
 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
e.内网：把三方文件下载到项目中

5.多环境

开发，测试，线上

不同的环境,db,账号等不同

如：请求地址的不同环境的前缀 process.env.VUE_APP_BASEURL来获取基础路径

在package.json中的script中配置test

 "scripts": {
    "serve": "vue-cli-service serve", //默认对应development
    "build": "vue-cli-service build", //默认对应production
    "build-test": "vue-cli-service build --mode test", //自定义的test  test名字在。env.test中来的
    "lint": "vue-cli-service lint"
  },

6.代码拆分

需要将大的代码模块拆分成多个小的，便于压缩传输

在vue.config.js中配置chainWebpack来做代码拆分的

const path =require('path')
module.exports = defineConfig({
  lintOnSave:false,
  transpileDependencies: true,
  //所以资源路径前缀
  publicPath:'/exam',
  //输出目录
  outputDir:'dist/exam',
  //代码拆分
  chainWebpack:config=>{
    config.when(process.env.NODE_ENV==="production",
    config => {
      config.optimization.splitChunks({
        chunks:'all', //同步代码同时执行，async,inital
        minSize:1000, //大约30kb需要拆分
        cacheGroups:{
          //提取三方包
          vendors:{
            name:'chunk-vendors',
            test:/[\\/]node_modules[\\/]/,
            priority:-10, //值越大，优先级越高
            chunks:'initial'
          },
          //提取组件包
          commons:{
            name:'chunk-commons',
            test: path.resolve('src/components'),
            priority:-9,
            reuseExistingChunk:true //如果有提取的chunk，则不在提取了
          }
        },
        
      })
    }
    )
  }
})