webpack

简介

webpack本身是node的一个第三方模块包, 用于打包代码
他可以把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

webpack的基础使用

首先我们要知道 我们webpack是有默认的出口和入口的
默认入口为 ./src/index.js
默认出口为 ./dist/main.js
这里需要注意的是
我们不能吧文件或者文件夹之类的名字 不能取名为webpack
接下来我们用yarn来使用webpack

首先初始化

命令 yarn init

接着我们安装依赖包 也就是webpack的包

命令 yarn add webpack webpack-cli -D

安装成功 就会如下所示

安装成功之后 我们需要自定义一个命令 配置scripts

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

这样我们就可以运行webpack了

我们先创建一个index.js 然后在src文件夹中创建一个add文件夹 并创建一个add.js文件

然后在add.js中创建一个函数 并引入index.js

然后输入命令
yarn build

然后就

按照默认出口给我们生成了 并且直接打印了结果

更新打包

在实际开发中 代码会经常进行变更 那我们如何重新打包呢
首先我们先创建一个新的js文件

然后在index.js 也就是入口处引入

接着再次执行 yarn build1

打开出口 发现这个函数也加了上去

自定义出入口

默认的配置是在 webpack.config.js里面
但是我们不能修改整个
所以我们可以新创一个 以覆盖的方式进行修改
我们先创建一个
然后开始设置

这里设置 需要我们会node的一些基础

首先我们查阅文档
找到入口和出口的文档

阅读完之后 我们开始配置自定义的出入口

然后我们还需要吧原来src文件夹中的index.js改名为我们自定义的路径
接着再次执行webpack

自定义完成

打包流程图

自动生成html文件

如果我们想要系统自动生成html文件的话 我们需要插件 HtmlWebpackPlugin

我们先下载这个插件

   yarn add html-webpack-plugin  -D

下载完之后 我们就在配置文件中 引入插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

接着我们按照官方文档开始配置即可

(https://webpack.docschina.org/loaders/css-loader/)

处理CSS

我们需要知道的是 webpack默认只认识js和json文件
所以我们依旧需要插件
styele-loder
css-loder
我们先安装两个插件
yarn add style-loader css-loader -D14

根据文档进行设置

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

最后在我们的入口js引入

import "./css/index.css"

处理less

处理less也是需要插件
less-loder文档
下载

yarn add less less-loader -D

配置

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

引入

import "./less/index.less"