webpack

初始化

webpack 解决浏览器之间js的兼容性 、压缩代码 性能优化

1. npm init -y

2. npm i jquery 然后import jquery 发现报错

3. 安装webpack npm i webpack@5.42.1 webpack-cli@4.9.1 -D

4. 在package.json中的src添加

     "scripts": {
       "dev": "webpack"
     },
   

   配置webpack.config.js

   1. mode 模式 可选值 development 和 production

      development 开发模式 压缩率低 速度快

      production 生产模式 压缩率高（去掉注释 空格 换行） 速度慢

   2. entry 入口文件 默认为 path.join(__dirname, './src/index.js')

   3. output 对象 默认为

      {
      ​    path: path.join(__dirname, './dist'),
      ​    filename: "main.js"
        }
      

   webpack.config.js

   const path = require("path")
   module.exports = {
       // 表示webpack运行的模式
       mode: "development",//可选值 development 和 production
       entry: path.join(__dirname, './src/index.js'),
       output: {
           path: path.join(__dirname, './dist'),
           filename: "bundle.js"
       }
   }
   

自动打包

1. 安装 webpack npm i webpack-dev-server -D

2. 修改package.json

     "scripts": {
       "dev": "webpack serve"
     },

3. 此时 每次保存 都会重新构建项目，会在项目根目录下生成 打包后的文件（看不见 但存在）

每次保存 如果都生成真实文件的话（某些程序员乱鸡巴点保存），会不断的写入硬盘，影响硬盘的寿命，所以该插件打包后的文件存在于内存中 而非硬盘

    <!-- 引用内存里的bundle  而非硬盘 -->
    <script src="/bundle.js"></script>

好用的插件

HtmlPlugin

为什么要用这个插件：此时存在一个问题，html存在于src目录下，所以每次访问项目localhost:8080需要手动点到src目录下 肥肠麻烦

作用：所以HtmlPlugin的作用是复制了一份html （虚拟的存在与内存而非磁盘）粘贴到根目录下，从此 直接访问localhost:8080就可以看到页面了，并且会自动引入bundle.js

1. 安装

   npm i html-webpack-plugin@5.3.2 -D

2. 引入

   const HtmlPlugin = require("html-webpack-plugin");

3. 实例化

   const htmlPlugin = new HtmlPlugin({
       // 复制谁
       template: './src/index.html',
       // 粘贴到哪去
       filename: './index.html'
   }) 
   

4. 使用

plugins: [htmlPlugin],

// 导入html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin");
//new 构造函数 创建插件的实例对象   解决访问localhost:8080 不能直接看到index页面的问题
// 可以在复制出来的页面自动注入一个脚本（/bundle.js）
const htmlPlugin = new HtmlPlugin({
    // 复制谁
    template: './src/index.html',
    // 粘贴到哪去
    filename: './index.html'
})
module.exports = {
  ...
    // 插件的数组 将来webpack在运行时会加载并调用这些插件
    plugins: [htmlPlugin],
}

webpack-dev-server

为什么要使用这个插件：因为程序员懒得每次打完包手动去打开浏览器

作用：自动打开浏览器 并且可以自定义打开的ip和端口

1. 安装

   npm i webpack-dev-server@3.11.2 -D

2. 使用

   ...
       devServer: {
           // 首次打包后 自动打开浏览器
           open: true,
           // 默认端口号
           port: 1001,
           // 指定打开后运行的地址
           host:'127.0.0.1'
       }
   }```