Vue与Webpack深度整合：模块打包与组件开发指南-优快云博客

        module.exports = {
          entry: "./src/main.js", // 入口
          output: {
          path: path.join(__dirname, "dist"), // 出口路径
          filename: "bundle.js" // 出口文件名
          }
        }

修改package.json, 自定义打包命令 - 让webpack使用配置文件

1.3.2 _yarn build执行流程图

1.3.3 隔行变色

步骤：

①：从0准备环境, 初始化包环境, 下载webpack和webpack-cli包, 配置自定义命令build

②：yarn下载jquery, 新建public/index.html,准备一些li标签

③：src/main.js 引入jquery, 编写功能代码

④：执行打包命令

⑤：复制public/index.html到dist/, 然后引入打包后的js, 运行网页观察效果

重点:webpack打包后的js引入到html中使用

1.3.4 webpack的插件

_html-webpack-plugin

简化了html的创建

(1) 安装

yarn add html-webpack-plugin -D

(2) webpack.config.js添加配置

1.3.5 webpack打包css问题

新建 - src/css/index.css

编写去除li圆点样式代码

(重要) 一定要引入到入口才会被webpack打包

执行打包命令观察效果

报错: 因为webpack默认只能处理js文件

1.3.6 webpack使用加载器css-loader,style-loader

css-loader 让webpack能处理css类型文件

style-loader 把css插入到DOM中

(1) 下载安装加载器

yarn add style-loader css-loader -D

(2) 配置

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"]
}
]
}
}

总结: 万物皆模块, 引到入口, 才会被webpack打包, css打包进js中, 然后被嵌入在style标签插入dom上

1.3.7 webpack使用加载器less-loader

(1) 安装

yarn add less less-loader -D

(2) 配置

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

1.3.8 webpack处理图片文件

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

直接入口文件导入打包会报错,因为webpack无法自己处理图片文件

webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader

以前用url-loader和file-loader来处理现在webpack.config.js – 针对图片文件设置type: “assets“

再次打包观察效果小于8KB文件, 文件转base64打包在js中, 大于8KB, 文件自动命名输出到dist下, 打包观察效果和2图区别

1.3.9 webpack加载文件的优缺点

图片翻译成了base64,放在js文件中

好处:浏览器不用发请求了，直接可以读取, 速度快

坏处: 图片太大，再转`base64`就会让图片的体积增大 30% 左右, 得不偿失

yarn install下载package.json中的所有包

1.3.10 加载字体图标

src/assets 下放入fonts字体相关文件夹(预习资料里)

src/main.js 引入 assets/fonts/iconfont.css

src/main.js 创建一个i标签, 使用字体图标标签添加到body上

添加针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)

打包后运行网页观察效果

1.3.11 webpack对JS语法降级加载器

babel官网: https://www.babeljs.cn/

babel-loader文档: https://webpack.docschina.org/loaders/babel-loader/

babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法
babel-loader: 可以让webpack转译打包的js代码
在src/main.js – 定义箭头函数, 并打印箭头函数变量 (千万不能调用, 为了让webpack打包函数, 看降级效果)

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

下载加载器

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

配置到webpack.config.js上

{
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/, // 不去匹配这个文件夹下的js文件
        use: {
            loader: 'babel-loader', // 使用这个loader处理js文件
            options: { // 加载器选项
                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
            }
        }
    }