webpack 学习总结

目录

一、Webpack的概述

二、安装 Webpack 

三、Webpack的基础使用

1.打包文件

2.CSS打包

3.webpack-dev-server 工具实现自动打包编译功能

4.html-webpack-plugin插件 

---

 

一、Webpack的概述

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

网页中常用的静态资源：

• JS(.js .jsx .coffee .ts(TypeScript中间语言，不能自浏览器中运行，需要编译器进行编译为js语言)) 
• CSS(.css .less .sass -> .scss 类似于.less) 
• Images(.jpg .png .gif .bmp .svg)
• 字体文件( .svg .ttf .eot .woff .woff2) 
• 模板文件(.ejs .jade .vue(在webpack中定义的组件方式，推荐使用，每一个.vue文件都是一个组件)) 

网页中静态资源多了以后有什么问题？

• 静态资源太多，浏览器渲染引擎在渲染页面时，遇到静态资源都会向服务器再一次发送请求，二次请求过多导致网页加载速度慢；
• 项目中可能会包含很多个静态资源，资源之间存在依赖，就需要处理复杂的依赖关系 

如何解决上述问题？ 

• 对资源进行合并（避免二次请求） 压缩（提高加载速度） 精灵图 图片的Base64编码 
• 使用requireJS，也可以使用 webpack解决包之间的复杂依赖关系

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

二、安装 Webpack 

全局安装：

npm install -g webpack   //npm
cnpm install webpack -g  //cnpm

三、Webpack的基础使用

1.打包文件

应用场景：可以把多个外部脚本的引入写入同一个.js文件中，不要再在.html文件中引入外部脚本，防止多次发送二次请求，将该文件打包包，只在.html中引入这一个打包文件就可。

打包流程：

• 创建项目
• 进入项目生成 package.json 文件

npm init -y

• 为项目添加依赖 node_modules

npm install webpack --save-dev

•  将 main.js 文件打包成 bundle.js 文件

当 main.js中包含浏览器不识别的语法时，webpack 能够处理JS的兼容问题，可以通过webpack进行处理转为浏览器能够识别的语法

webpack4 对命令的语法要求更加严格，打包文件的命令如下：

webpack main.js --output-filename bundle.js --output-pat --mode development

打包成功后，会在 dist 文件夹中生成想要的 bundle.js，只需要在 .html 中script标签引入 bundle.js 文件即可

<script src="../dist/bundle.js"></script>

 

2.CSS打包

CSS打包步骤：

• 安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader 

• 修改webpack.config.js 

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3.webpack-dev-server 工具实现自动打包编译功能

应用场景：

• webpack-dev-server 工具实现自动打包编译，不需要每次修改.html 文件之后，手动打包

注意：

• 使用webpack-dev-server 工具必须在本地项目中安装webpack

npm install --save-dev webpack-dev-server

webpack-dev-server 帮我们打包好的 bundle.js 和 webpack命令（以上手动打包的）打包的存放在dist文件中的bundle.js并不是同一个，它并没有存放在实际的物理磁盘中，而是托管在电脑的内存中（因为放在内存中读取速度快），所以在根目录中找不到这个 bundle.js 文件，实际是一个虚拟的文件，但是在.html文件中引用时，路径就是 src = '/bundle.js'，如下：

    <script src="/bundle.js"></script>

可以在 package.json 中 'scripts' 对象进行配置，配置如下：

属性 dev 是自定义的命令，通过 npm run dev 执行，替代了 webpack-dev-server 命令，执行该命令后，只要修改.html就会自动进行打包无需手动

参数说明：

• --open ：执行 webpack-dev-server 时，自动打开浏览器，默认 http://localhost:8080
• -- port 3000： 修改默认的端口号8080为3000
• --contentBase src ：默认打开的页面，因为 index.html 存放于 src 文件夹下
• --hot ：热更新（局部修改），实现浏览器的无刷新

"scripts":{
  "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot",
  "build":"webpack --mode prouction"
}

使用webpack-dev-server 工具来实现自动打包编译功能实现步骤：

1. 运行 npm install --save-dev webpack-dev-server  把工具安装到项目的本地开发环境
2. 安装完毕后，用法和webpack 命令用法一样
3. 由于是在项目中安装的 webpack-dev-server，所以无法当做脚本命令运行在终端中直接运行，只有安装到 全局 -g 的工具才能在终端中正常运行
4. webpack-dev-server 帮我们 打包好的 bundle.js 和 webpack main.js --output-filename bundle.js --output-pat --mode development
5. 命令生成的存放于 dist 中的 bundle.js 并不是同一个，它并没有存放在实际的 物理磁盘中，而是托管到 电脑的内存中，所以在根目录中找不到这个打包好的 bundle.js

文件，是一个虚拟的文件，但是我们在index.html中引入的时候，路劲就是'/bundle.js'

4.html-webpack-plugin插件 

在内存中生成一个以 指定.html文件为模板的内存页面，等于是将本地磁盘中的.html文件复制一份到内存中去，项目中会引用内存中的复制的.html文件，类似于内存中的 bundle.js

应用场景：

• 使用上方的npm run dev可以帮我们启动一个服务器，但是需要手动打开链接，html-webpack-plugin插件可以在自动打包完成后自动打开浏览器

作用：

• 自动在内存中 根据指定的页面生成一个内存页面
• 自动把打包好的bundle.js追加到内存页面中，不用考虑复制前在页面中引用内存中的bundle.js文件还是内存中的bundle.js文件

使用步骤：

• 安装html-webpack-plugin插件

npm i html-webpack-plugin -D

• 在webpack.config.js 中配置

// 第一步：导入内存中生成的 html 页面的插件
const htmlwebpackPlugin = require('html-webpack-plugin');
// 第二步：只要是插件都要放到 plugins 节点中去
module.exports = {
    plugins:[  // 配置插件的节点
        new htmlwebpackPlugin({   // 创建一个在内存中生成的 html 页面的插件
            template: path.join(__dirname,'./src/index.html'),
            // 指定模板页面。会根据指定的模板页面路径生成内存中的页面
            filename: 'indexcopy.html'  // 指定生成页面的名称
        })
    ]
};

• 执行npm run dev 启动

---

本文由博主在学习过程中所写，如有错误和问题，望理解。