字数统计: 1.9k   |   阅读时长≈ 8 分钟

Webpack4.0

一、最基础的基础

1.1 使用版本

package version
node v14.19.0
npm v6.14.16
webpack v4.41.2
webpack-cli v3.3.10

1.2 全局安装

1
2
npm install webpack@4.41.2 -g
npm install webpack-cli@3.3.10 -g

1.3 本地工程

新建一个本地工程文件夹，然后使用npm启动，生成package.json文件

1
2
3
4
5
6
//cd到指定文件目录
cd E://xxx/xxx/xxx

//
npm init -y

1.4 构建本地工程的包文件

1
2
npm install webpack@4.41.2 -D
npm install webpack-cli@3.3.10 -D

1.5 撰写code

在package.json所在路径下新建src文件夹，并在src文件夹内新建code文档，书写代码。

这里有一个问题就是为什么要新建一个src必须把code放入src文件夹下，因为在这里用的还是一些默认的配置，等以后用webpack.config.js进行详细配置的时候就可以任意配置编译文件位置了。

1.6 启动webpack编译

1
2
3
4
5
6
cmd中敲入如下代码执行
webpack --mode=development   //开发者模式
webpack --mode=production    //生产模式

*注：webpack到4.0之后加入mode模式，通过设置mode来确定编译模式，其中开发者模式是没有进行代码混淆的，生产模式有代码混淆

编译后的结果会生成一个dist文件夹，在文件夹内的文件就是编译后的结果，这时再新建一个html引入编译后的文件即可运行

二、基础的进阶–热更新

第一part所使用的都是最基本的东西，没有使用插件，也没有使用webpack的打包文件，生成的html也不能实现热更新（即每次更新完代码，都需要手动编译一遍，再刷新页面才能得到新的结果）。

2.1 webpack-dev-server

热更新是通过webpack-dev-server插件实现的，其简写为WDS，有如下特点：

  • 不会刷新真个页面
  • 不输出文件，而是放在内存中
  • 使用webpack自带的HotModuleReplacementPlugin插件

2.1.1 version

package version
webpack-dev-server v3.9.0

2.1.2 安装

1
npm install webpack-dev-server@3.9.0 -D

2.2 webpack 配置

新建webpack.config.js,这里除了配置入口和出口，主要配置devserver

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const {resolve} = require('path');
module.exports={

    entry:"./index.js",//打包的文件入口
    output:{
        filename:"build.js",//打包后的文件名
        path: resolve(__dirname,"dist"),//resolve的作用是拼接路径，__dirname是当前文件所在的绝对路径
    },
    /**loader,处理资源的加载器*/
    module:{},
    /*插件*/
    plugins: [],
    /*模式，development是开发者模式--可以调试，production是生产环境模式--发布的混淆代码*/
    mode:"development",
    /*webpack 服务*/
    devServer: {
        hot:true,//热更新
        open:true,//自动在浏览器打开
        contentBase:resolve(__dirname,'dist'),//发布的路径，dist目录，--实测没有这个路径会无法发布
        port:7800,
        host:"0.0.0.0",
        historyApiFallback:true,
        useLocalIp:true,//是否使用本地ip
        proxy:{
            '/action':'http://127.0.0.1:8080'
        }
        
    }
}

再在cmd中敲入如下命令，得到的结果是在dist路径下生成一build.js，然后把build.js引入html后可以在页面中调用

1
webpack --config webpack.config.js --mode development

2.3 设置为devserver 启动

在package.json中的scripts中可以添加键值对，作为启动命令，这里添加server

1
2
3
4
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "server": "webpack-dev-server --mode development --inline --progress --config webpack.config.js "
},

这样在index.js中改完后，在html中就会直接运行。

2.4 前提

在这种启动方式的前提是在dist已经有html，并且我们已经人为把打包好的包的引入html中

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="build.js"></script>//如果这里不写，则webpack不知道该引入哪个文件进来

</body>
</html>

三、再进阶–动态生成html

在第二part解决了热更新的问题，并引入webpack.config.js配置文件作为配置项，逐渐变得正常化了，接下来开始要引用plugins等来解决html生成问题，现在是手动生成，完全可以用插件实现自动生成。

3.1 安装html-webpack-plugin

1
npm install html-webpack-plugin@3.2.0 -D

3.2 配置插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入插件
module.exports = {

    entry: "./index.js",//打包的文件入口
    output: {
      ....
    },
    /**loader,处理资源的加载器*/
    module: {},
    /*插件*/
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html",//模板文件路径和文件名，路径是相对于package.json的路径，打包时自动会配置到dist文件夹下
            filename: "index.html"//这里可以带路径打包好后，在dist文件夹下的路径生成的html的文件名称
        })
    ],
    /*模式，development是开发者模式--可以调试，production是生产环境模式--发布的混淆代码*/
    mode: "development",
    /*webpack 服务*/
    devServer: {
       ...
    }
}

3.3 使用

新建的html模板是这样子的，除了基本框架没有写任何的script引用，因为到时候会自动引入进来

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

可以在cmd命令行中敲入

1
webpack --config webpack.config.js --mode production

也可以在package.json中的scripts中添加一个启动命令，这里添加的是build

1
2
3
4
5
6
7
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "server": "webpack-dev-server --mode development --inline --progress --config webpack.config.js ",
  "build": "webpack --mode production"
},
 
 *注：这里没有写--config webpack.config.js,是因为webpack默认会在package.json所在路径找这个webpack.config.js这个文件，所以可以省略

3.4 更多的配置

这里不上图了，手敲

属性名 字段类型 默认值 有用 说明
title String webpackApp √ 网页document.title的配置
filename String index.html √ html文件生成的名称，生成路径在output.path的目录
template String 空 √ 生成filename文件的模板，如果存在src/index.html，默认会使用这个模板，模板路径会从项目的根路径开始匹配
templateParameters Boolean|Object|Function 空 覆盖默认的模板中使用的参数
inject Boolean|String true √ 打包后的css和js插入html中的位置，true或body会放到body底部，head会放到head元素中去
favicon String 空 为生成的html配置一个favicon
mete Object {} 为生成的html注入一些mete信息，如：{viewport：”width=device-width，initialscale=1，shrink-to-fit=no“}
base Object|String|false false 在生成的html中注入base标签。eg:base:”https://exanple.com/path/page.html",标签为页面上所有的链接规定默认地址或默认目标
minify Boolean|Object production？true：false 设置静态资源的压缩情况
hash Boolean false √ 如果为真，则所有包括js和css文件附加一个唯一的weback编译的uuid，这对于更新每次的混村文件名非常有用
cache Boolean true √ 设置js css 文件的缓存，当文件没有发生变化时，是否设置使用缓存
showErrors Boolean true 当文件发生错误是，是否将错误信息显示在页面
xhtml Boolean false 如果为true的时候将会标签设置为符合xhtml规范的自闭合形式

四、loader样式打包

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2015-2022 tanz
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~