webpack的安装和基本使用

webpack概念

中文文档官网: https://www.webpackjs.com/

网页中常用的静态资源:
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文件都是一个组件)) 

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

如何解决上述问题? 
1. 对资源进行合并(避免二次请求) 压缩(提高加载速度) 精灵图 图片的Base64编码 
2. 使用requireJS,也可以使用 webpack解决包之间的复杂依赖关系,如下图
 

基于Node.JS开发出来的一个前端项目的自动化构建工具。webpack是一个现代Javascript应用程序的模块打包器(module bundler),分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Less、TypeScript等),并将其打包为合适的格式以供浏览器使用。

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

webpack 安装

在开始之前,请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步。使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

1、安装 Node.js

2、本地安装

最新的webpack版本是: webpack v4.16.1

要安装最新的或者特定的版本,请运行以下命令之一:

npm install --save-dev webpack
npm install --save-dev webpack@<version>

注意:如果使用的webpack 4+ 版本,还需要安装 cli,因为webpack 4将 cli 分离出来了

npm install --save-dev webpack-cli

3、全局安装

以下的 NPM 安装方式,将使 webpack 在全局环境下可用:

npm install --global webpack

通过 webpack -v查看已安装的版本,安装成功则会显示安装的版本

webpack 基本使用

  • webpack 处理 JS 文件之间的相互依赖关系,可以在一个.js文件中引入另一个.js(比如第三方jquery库)文件,可以把多个外部脚本的引入写入同一个.js文件中,进行打包,只在.html中引入这一个打包文件就可。
  • webpack 能够处理 JS 兼容问题,把高级的浏览器不识别的语法(比如ES6等)转为低级的浏览器能识别的语法
  • 不需要在 .html 文件中引入大量的静态资源(js css images 字体文件 模板文件),大量的静态资源会影响网页的加载速度,导致大量的二次请求。使用webpack可以很好解决这些问题

1、打包 .js 文件

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

1)创建项目,项目包含的基本目录如下,

2)进入项目生成 package.json 文件

npm init -y

3)为项目添加依赖 node_modules

npm install webpack --save-dev

4) 将 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>

***优化方法***:

     通过创建配置webpack.config.js 文件,简化以上命令为 webpack,只需要在终端中输入 webpack 就可以打包文件,不需要输入要打包的文件路径 和 打包好的输出文件路径

const path = require('path');
// 配置文件就是一个 js 文件,通过 node 中的模块操作向外暴露一个配置对象
module.exports = {
    // 手动指定一个 入口 和 出口
    mode: 'development',
    entry: path.join(__dirname, './src/main.js'), /*入口表示要使用webpack打包那个文件*/
    output: {
        /*输出文件相关配置*/
        path: path.join(__dirname, './dist'), /*指定打包好的文件输出的目录*/
        filename: 'bundle.js'   /*指定输出文件的名称*/
    },
}

缺点:每次修改完 .html 之后都是要执行命令,刷新 bundle.js 文件,否则修改.html后不能同步到bundle.js 文件

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

应用场景:webpack-dev-server 工具实现自动打包编译,不需要每次修改.html 文件之后,手动打包

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

***使用步骤***:

1)安装工具,把工具安装到本地项目

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

注意:安装完毕之后,用法和 webpack 命令一样,但是由于是在项目中安装的 webpack-dev-server,所以无法当做脚本命令直接运行在终端中,只有安装到全局 -g 的工具才能在终端中直接运行;

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 :热更新(局部修改),实现浏览器的无刷新

也可以通过在webpack.config.js 中配置 devServer 对象实现,相对比有点麻烦,推荐使用上种方式

使用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
命令生成的存放于 dist 中的 bundle.js 并不是同一个,它并没有存放在实际的 物理磁盘中,而是托管到 电脑的内存中,所以在根目录中找不到这个打包好的 bundle.js
文件,是一个虚拟的文件,但是我们在index.html中引入的时候,路劲就是'/bundle.js'

3、html-webpack-plugin插件

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

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

作用:

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

1)安装html-webpack-plugin插件

npm i html-webpack-plugin -D

2)在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 启动

4、webpack 处理非 JS 文件——loader 加载器

在 .js 中利用 import 引入 .css 样式表,但是webpack默认只能处理JS类型文件,如果需要处理非JS文件,需要安装合适的第三方 loader 加载器

  •  webpack 发现处理的文件不是 JS 文件,就会去配置文件中查找有没有对应的第三方 loader 规则,如果找到对应的规则就会去调用 对应的 loader 处理文件
  • 在调用 loader时候是从后往前调用的,当最后一个 loader 调用完毕之后,会把处理结果直接交给 webpack 进行打包,最终输出到 bundle.js 中

1) 安装第三方 loader 加载器

cnpm i style-loader css-loader -D

2)在 webpack.config.js 文件中新增一个配置节点module,他是一个对象,有一个rules属性,属性值为存放了所有第三方文件的匹配和处理规则

​// 配置文件就是一个 js 文件,通过 node 中的模块操作向外暴露一个配置对象
module.exports = {
    module: {  // 第三方模块加载器
        rules: [ // 匹配规则
            {test: /\.css$/, use:['style-loader','css-loader']}  // 配置处理 .css 文件的第三方 loader 规则
        ]
    }
};

如内容有误,希望及时指正,谢谢!

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页