webpack的使用

最新推荐文章于 2023-12-24 21:20:52 发布

原创最新推荐文章于 2023-12-24 21:20:52 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

本文全面解析Webpack，涵盖安装、配置及高级用法。从模块打包到热更新，从SPA到MPA，助您掌握前端构建利器。

webpack及其使用

什么是webpack

什么是webpack

webpack是javascript的静态模块打包器

webpack的作用

webpack的作用主要用于解析import与export，将相应的模块打包

webpack的安装

全局安装：

在webpack4之前可以直接使用:cnpm i webpack -g安装;
但在webpack4时需要增加安装:webpack-cli 即:cnpm i webpack-cli -g
当然你可以通过一行命令直接完成：cnpm i webpack webpack-cli -g
完成上述安装后可在cmd中输入:webpack - v 检测安装是否完成；若成功显示版本就表示安装成功,如下图
在这里插入图片描述

本地安装

1.创建本地项目目录:

mkdir 文件名 && cd 创建的文件名

2.创建package.json文件

cnpm init -y 或cnpm init -yes

3.本地安装webpack

cnpm i webpack webpack-cli -g

webpack4的基本配置

webpack的配置文件:webpack.config.js
在webpack4中，如果不写该js，则采用默认配置。即：入口文件为index.js,出口文件为main.js(在创建文件时必须为这两个文件否则无法通过webpack进行打包)。
若要修改配置可webpack.config.js更改配置

webpack的配置文件的4个核心

1.入口：entry：配置入口文件的文件名

2.出口：output:配置出口文件的路径和文件名{path:“路径”,filename:“文件名”}

3.模块加载器：Loader

使用流程（以css的使用为例）：
a.安装响应的模块：cnpm i css-loader style-loader -D
(css的使用需要css-loader进行解析css,通过style-loader将css插入到html文档中的style标签中,故需要安装这两个模块)
b.在配置文件中进行相应的配置：

module:{
	 rules: [{
                test: /\.css$/,//通过正则来查找要使用这些模块的文件
                use: ['style-loader', 'css-loader']//使用的模块
         }]
}

4.插件:plugins

目的:解决模块加载器（loader）无法解决的问题(以htmlwebpackPlugin为例)
htmlWebpackPlugin:这个插件的作用是依据一个简单的模板，帮助生成最终的Html5文件，这个文件中会自动引用了打包后的JS文件
使用:1.安装相应插件 cnpm i html-webpack-plugin -D
2.在配置文件中通过require导入插件 const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
3.webpack的配置文件中进行配置使用

const const HtmlWebpackPlugin = require('html-webpack-plugin');
//下面的配置表示以根目录下src/template.html文件为模板,在输出目录生成一个index.html文件，并且这个文件会自动导入最终生成的js文件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/template.html')
        })
    ]//需要在头部引入该模块

通过webpack打包的基本流程

1.Es6–>es5–>打包压缩

首先将js文件中的es6语法转换为es5语法，并打包到一个js文件中,此处需要使用到上述的Loader(模块加载器）
安装babel-loader:
cnpm i @babel/core @babel/preset-env babel-polyfill babel-loader @babel/runtime @babel/plugin-transform-runtime -D
创建.babelrc配置文件(babel与其他大部分模块不同，它需要有一个专门的配置文件)
在配置文件(webpack.config.js)中书写规则（使所有js文件都通过bable进行转义）

module: {
rules: [
     { test: /\.js$/, use: ['babel-loader'] },
]
},

2.less->css->打包进入style标签中

安装less-loader（因为需要将其转换为css，并写入style中故需要css-loader与style-loader）
cnpm i less less-loader css-loader style-loader -D
在配置文件中写下模块加载规则

module: {
rules: [
{ 
test: /\.less$/, 
use: ['style-loader', 'css-loader', 'less-loader']
}
}

然后在js文件中导入less文件后生效
import "./less/sty1.less";
import "./less/sty2.less";

3.压缩html页面

下载插件
cnpm i html-loader -D

{
  test: /\.html$/,
  use: [ {
    loader: 'html-loader',
    options: {
      minimize: true
    }
  }],
}

Webpack别名配置

要配置时只要在配置文件中在配置对象上添加resolve字段即可

	resolve: {
	alias: {
	dem: path.resolve(__dirname, 'src/js/demo'),//此后可通过dem代替'src/js/demo'的路径
	}
},

webpack的热更新

什么是热更新

什么是热更新，就是当我们修改了代码后不需要手动刷新，网页会自动刷新更改，这就是热更新。就像我们使用vscode的一些服务器插件（liver-server服务器）的效果。

webpack热更新的实现

通过vsCode的live-server+执行webpack时加上-w(watch的简写)
热更新= live-server + webpack -w + 每次打包时不能删除dist文件夹
也可通过webpack-dev-server来简化,本篇暂不概述。

webpack中spa与mpa的入口出口文件配置

spa(单页应用)

由于spa仅有一个页面故出口文件仅有一个，所以主要时对于入口文件的配置
当只有一个入口文件时直接通过字符串的形式书写

 entry: './src/index.js', //入口文件

当存在多个入口文件时以数组的形式书写

 entry: '[./src/index.js','./src/index1.js'], //入口文件

mpa(多页应用)

由于mpa存在多个页面所以有多个出口所以入口文件与出口文件均需要配置

entry: {index1:'./src/index.js',index2:'./src/index1.js'}, //入口文件
    output:{//表示输出文件相关信息
        path:path.resolve(__dirname,'dist'), //输出到当前目录下的dist文件夹，如果不存在就会自动创建一个
        filename:'[name].js' //最终生成的js文件
    }