webpack博客

一、webpack了解

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
Scss，less等CSS预处理器…
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。

webpack打包原理

把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。

webpack的优势

（1） webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

（2）能被模块化的不仅仅是 JS 了。

（3） 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

（4）扩展性强，插件机制完善

官方文档：

概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://www.webpackjs.com/concepts/#entry

二. webpack打包工具的安装

webpack打包工具依赖nodejs. nodejs环境依赖各种包, 这些包使用npm进行管理 npm就是用来管理node下的各种包的

第一步: 安装nodejs

在官网下载nodejs:https://nodejs.org/zh-cn/ 安装好以后可以查看nodejs的版本

node -v

第二步: 安装webpack

首先查看本机是否已经安装了webpack, 使用命令查询

 webpack --version

如果没有安装, 则安装全局的webpack

npm i webpack webpack-cli -D

三. webpack的基本使用

 Loader的使用

npm i class-loader style-loader -D

css-loader处理.css文件style-loader把css加载到style标签内

module.exports = {
    module: {
        rules: [
            // 当文件名test通过，使用如下插件
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
        ]
    },
}

处理图片

安装 npm i file-loader url-loader -D

作用 加载图片和文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
                use: [{
                    loader: "url-loader", // 使用url加载器
                    options: { limit: 5000, name: 'images/[hash].[ext]' },
                    // 文件命名 images文件夹，hash值（计算出图片的名称） ext后缀名
                }]
            }
        ]
    },
}

plugin插件

Plugin 的配置很简单，plugins 配置项接受一个数组，数组里每一项都是一个要使用的 Plugin 的实例，Plugin 需要的参数通过构造函数传入。

安装:npm i html-webpack-plugin -D

作用:生成html模板文件，自动把打包好的js插入到模板文件

在webpack.config.js 导入

const HtmlwebpackPlugin = require(“html-webpack-plugin”)
plugins:[
​        new HtmlwebpackPlugin({template:"./public/index.html"})    
​]

webpack中的魔法注释

魔法注释
 

    import(/* webpackChunkName:"jquery" , webpackPrefetch: true */                                           "jquery").then(({default:$})=>{
        console.log($);
    })

webpackChunkName:"jquery" 
给当前的js 文件命名
      webpackPrefetch: true *
网络有空闲预加载js

哈希命名

 01 可以控制浏览器的缓存
当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
当文件名保持不变，浏览器二次请求会从缓存里面去请求内容
  02 提供二次加载的速度（有效的控制缓存）
    contenthash
        内容发生变化 contenthash值才发送变化
    chunkhash
        入口发生变化，当前的文件chunkhashhash会变化
    hash
        只要项目内容发送变化，hash就会变化
环境变量
    配置：通过环境命令  产品环境 压缩代码，是生产环境不压缩代码，打开devtool
    项目开发中 ，产品环境 baseURL http://dida100.com:8888
 生产环境 baseURL   http://localhost:8080
    1.npm i cross-env -D
    2. package.json 传参
        "build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve",
    3. webpack.config.js使用
        mode:process.env.NODE_ENV,
        devtool:process.env.NODE_ENV==="production"?false:'eval-cheap-source-map',
    4. js文件中使用
        var baseURL = "";
if(process.env.NODE_ENV=="production"){
    baseURL = "http://dida100.com";
}else{
    baseURL = "http://localhost"
}
console.log("当前环境：",process.env.NODE_ENV,baseURL);
vue脚手架
    不要vue脚手架如何搭建项目？
    安装

   npm i vue -S
   npm i vue-loader 

处理.vue
            vue-template-compiler
编译vue目录
            vue-hot-reload-api
热更新
            vue-style-loader  
    配置
        01 导入

​​​​​​​const {VueLoaderPlugin}  =  require("vue-loader")​​​​​​​

         02 配置

​​​​​​​​​​​​​​{test:/\.vue$/,use:["vue-loader"]}

     03 插件
 

plugins:[new VueLoaderPlugin()]

 js

       模板文件 public/main.html
<div id="app"></div>
        main.js
import { createApp } from 'vue';

 导入App.vue

import App from './App.vue';
console.log(App);

创建App并挂载

 createApp(App).mount("#app")
        App.vue
            <template >
    <div>
        <h1>你好Vue3</h1>         
    </div>
</template >