Vue - webpack vue/cli 脚手架

最新推荐文章于 2024-03-01 15:27:00 发布

CodeCxil

最新推荐文章于 2024-03-01 15:27:00 发布

阅读量1.2k

点赞数

文章标签： webpack vue.js javascript

本文链接：https://blog.csdn.net/qq_41098074/article/details/127942444

版权

概念：

为什么要学webpack？

思考

1、以前写的网站，文件很多，体积很大？？

2、有没有一种自动整合，压缩，剔除无用代码的技术？？

小结

1、减少文件数量

2、压缩代码体积

3、提高浏览器打开速度。（浏览器打开项目的速度）

一.webpack基本概念

webpack

node的一个第三方模块包, 用于打包代码

1、现代 javascript 应用程序的 静态模块打包器 (module bundler)

2、为要学的 vue-cli 开发环境做铺垫

webpack能做什么

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

功能

1、支持所有类型文件的大包

2、支持 Less/Sass => css

3、支持 Es6/7/8 => ES5

4、压缩代码，提高加载速度

小结

1、他是一个模块包。
2、识别代码，翻译，压缩，整合打包。
3、提高打开网站的速度。

二、webpack的使用步骤

1.需要先安装 yarn

npm install --global yarn

参考文档使用方法 | Yarn 中文文档

安装完成之后

①初始化包环境 yarn init 或者 npm init
②安装依赖包 yarn add webpack webpack-cli -D

③配置scrpts（自定义）在packjson.js文件中

"scripts": {
	"build": "webpack"
}

2.webpack的基础使用

打包命令 yarn build 或者 npm run build

总结

1、默认 src/index.js - 打包入口文件

2、需要引入到入口的文件才会参与打包

3、执行 package.json 里的 build 命令，执行 webpack 打包命令

4、默认输出 dist/main.js 的打包结果

3.webpack 更新打包

以后代码变更, 如何重新打包呢

重新执行 yarn build 命令即可

三、webpack的配置

const path = require("path")

module.exports = {
    entry: "./src/main.js", // 项目打包定义的入口文件
    output: { 
        path: path.join(__dirname, "dist"), // 打完包之后的出口路径（文件夹）
        filename: "bundle.js" // 打完包之后的出口文件名
    }
}

webpack.config.js 配置文件可以自己写入

注意: webpack基于node, 所以导出, 遵守CommonJS规范

小结

如何修改 webpack 入口和出口
1、新建 webpack.config.js(webpack 默认配置文件名)
2、通过 entry 设置入口文件路径
3、通过 output 对象设置出口路径和文件名

重点

所有要被打包的资源都要跟入口产生直接/间接的引用关系

总结

yarn build 之后干了什么？

执行 webpack 命令，找到配置文件，入口和各个文件的依赖关系，打包代码输出到指定位置

案例

yarn add jquery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<div id="app">
  <!-- ul>li{我是第$个li}*10 -->
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
  </ul>
</div>

</body>
</html>

总结

前端工程化模块化, 需要的包yarn下, 被webpack打包后引入到html中使用

拓展

1、devDependencies 里面的依赖只用于开发环境，不用于生产环境。

2、dependencies 依赖的包不仅开发环境能使用，生产环境也能使用。

四、插件-自动生成html 文件

每次打包后还的自己手动建立 html，累不累？麻烦不麻烦？有没有便捷的方法？

目标

html-webpack-plugin插件, 让webpack打包后生成html文件并自动引入打包后的js

步骤！

①下载插件

yarn add html-webpack-plugin -D

②webpack.config.js配置

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此为基准生成打包后html文件
        })
    ]
}

③重新打包后观察dist下是否多出html 并运行查看效果，打包后的index.html自动引入打包后的js文件

总结

webpack就像一个人, webpack.config.js是人物属性, 给它穿什么装备它就干什么活

1、依赖 html-webpack-plugin 插件，yarn 下载此插件

2、在 webpack.config.js 中写入配置即可。

五、加载器-处理css文件问题

因为webpack默认只能处理js类型文件。

所以通过loader加载器，可以让webpack处理其他类型的文件，让她打包到js中。

步骤：

①安装依赖 yarn add style-loader css-loader -D

②配置webpack.config.js配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...其他代码
    module: { 
        rules: [ // loader的规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

③引入到main.js

import "./css/index.css"

④运行打包命令 yarn build

六、加载器-处理less文件

①yarn add less less-loader -D

②配置webpack.config.js 配置

module: {
  rules: [ // loader的规则
    // ...省略其他
    {
    	test: /\.less$/,
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

③引入main.js

import "./less/index.less"

④运行打包命令 yarn build

七、加载器-处理图片文件

如果是 webpack5版本的可以直接配置

module: {//  加载器配置
    rules: [ // 规则
      {//图片文件的配置（仅适用于webpack5版本）
        test: /\.(gif|png|jpg|jpeg)/,
        type: 'asset',//匹配上面的文件后，webpack会把他们当做静态资源处理打包
        //如果你设置的是assets模式
        //以8KB大小区分图片文件
        //小于8KB的，把图片转base64，打包进js中
        //大于8KB的，直接把图片文件输出到dist下
      }
    ]
  }

如果是webpack4的可以参考官方文档里面的配置。

八、webpack加载文件优缺点

图片转成base64字符串

好处：浏览器不用发请求了，可以直接读取

坏处：如果图片太大，再转base64就会让图片的体积增大30%左右

九、处理字体文件

{ // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',
    generator: {
    	filename: 'font/[name].[hash:6][ext]'
    }
}

引入

// 引入字体图标文件

import "./assets/fonts/iconfont.css"
let theI = document.createElement("i")
theI.className = "iconfont icon-qq"
document.body.appendChild(theI)

总结

url-loader和file-loader 可以打包静态资源文件

在 webpackconfig.js 的 rules 里针对字体图标文件类型设置 asset/resource，直接输出到 dist 下

十、加载器-处理高版本JS语法

作用

babel：一个 javascript 编译器，把高版本 js 语法降级处理输出兼容的低版本语法。

babel-loader：可以让 webpack 转译打包的 js 代码

步骤

①yarn add -D babel-loader @babel/core @babel/preset-env

②配置

module: {
  rules: [
    {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
            }
        }
    }
  ]
}

③main.js配置

// 高级语法
const fn = () => {
  console.log("你好babel");
}
console.log(fn) // 这里必须打印不能调用/不使用, 不然webpack会精简成一句打印不要函数了/不会编译未使用的代码
// 没有babel集成时, 原样直接打包进lib/bundle.js
// 有babel集成时, 会翻译成普通函数打包进lib/bundle.js

④打包！

十一、webpack开发服务器

步骤

①yarn add webpack-dev-server -D

②

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

③启动

yarn serve
#或者 npm run serve

总结

以后改了src下的资源代码, 就会直接更新到内存打包, 然后反馈到浏览器上了

1、确保下载了 webpack-dev-server 到工程中

2、在 package.json - 配置自定义命令，然后启动即可

3、webpack-dev-server 会给我们一个地址 + 端口访问地址加端口即可看到内存中打包的 index.html 页面

如何修改端口号？webpack.config.js配置文件

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000 // 端口号
    }
}

CodeCxil

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue - webpack vue/cli 脚手架

概念：为什么要学webpack？思考1、以前写的网站，文件很多，体积很大？？2、有没有一种自动整合，压缩，剔除无用代码的技术？？小结1、减少文件数量2、压缩代码体积3、提高浏览器打开速度。（浏览器打开项目的速度）
复制链接

扫一扫