webpack的学习之路~~第一天

blankyao 发布于2019-08-22 17:03 / 2401人阅读

摘要：第节认识的作用学习的一原因现在的前端网页功能丰富，特别是单页应用技术流行后，的复杂度增加和需要一大堆依赖包，还需要解决，新增样式的扩展写法的编译工作。在出现后，还肩负起了优化项目的责任。其实就是获取了项目的绝对路径。

第01节：认识WebPack的作用：

学习的一原因：

现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决SCSS，Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。

现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。

React.js+WebPack
Vue.js+WebPack
AngluarJS+WebPack
从此可以看出，无论你前端走那条线，你都要有很强的Webpack知识，才能祝你成为这个框架领域的大牛。

2.对webpack的理解：

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

这段话有三个重点：

打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。
我们可以从下图再次了解一下WebPack的作用:

第02节：让你快速上手一个Demo

引用文字
如果webpack是最新版本（目前是：4.7.0），在执行webpack命令时，经常会出现提示安装webpack-cli，个人由于偷懒一点，在网上找了一些方法，由于才刚入门还不太理解，就退回3.6.0版本了。方法：先在package-json文件中把之前版本号改成需要的版本号（我的是4.7.0—>3.6.0,如图所示：
）
接着删除了node_modules文件，最后在终端输入命令：cnpm install webpack@3.6.0 -g
，在终端输入webpack -v出现版本号，结果如下即可：

建立基本项目结构

首先建立webpack_demo文件（每个人建立的位置不同，可能建立在了D盘或者E盘）。在该文件的根目录下建立两个文件夹，分别是src文件夹和dist文件夹：

src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

你可以理解成src是源码文件，dist是我们编译打包好的文件；一个用于开发环境，一个用于生产环境。

编写程序文件：
文件夹建立好后，我们在dist文件下手动建立一个index.html文件，并写入下面的代码。
（代码略）

2.第一次Webpack打包

Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：
webpack {entry file} {destination for bundled file}
{entery file}:入口文件的路径，本文中就是src/entery.js的路径；
{destination for bundled file}:填写打包后存放的路径。
注意：在命令行中是不需要写{ }的。

第03节：配置文件：入口和出口

配置文件webpack.config.js

webpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置，先看下面的代码（webpack.config.js的基本结构），这是一个没有内容的标准webpack配置模版。

entry：配置入口文件的地址，可以是单一入口，也可以是多入口。
output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
module：配置模块，主要是解析CSS和图片转换压缩等功能。
plugins：配置插件，根据你的需要配置不同功能的插件。
devServer：配置开发服务功能，后期我们会详细讲解。

1.entry选项（入口配置）

这个选项就是配置我们要压缩的文件一般是JavaScript文件（当然也可以是CSS…..）。这里要填写的是src目录下的entery.js文件。

//入口文件的配置项
entry:{

//里面的entery是可以随便写的
entry:"./src/entry.js"

2.output选项（出口配置）

出口配置是用来告诉webpack最后打包文件的地址和文件名称的。按照上节课的操作，应该打包到dist目录下。在编写出口文件时，我们需要用到一点Node的知识，如果你还不会Node也没有关系，就简单的两句代码，你记住就可以了（老师如是说）。

//出口文件的配置项
output:{

//打包的路径文职
path:path.resolve(__dirname,"dist"),
//打包的文件名称
filename:"bundle.js"

列表如果你只这样写，是会报错的：找不到path这个东西。所以我们要在webpack.config.js的头部引入path，代码如下：

const path = require("path");

这里我们使用了const，这是ES6的语法，如果你对ES6还不熟悉，也可以看技术胖ES6的课程哦（http://jspang.com/2017/06/03/...）。

（其实path.resolve(__dirname,’dist’)就是获取了项目的绝对路径。）

（filename:是打包后的文件名称，这里我们起名为bundle.js。）

3.现在是webpack.config.js的完整代码：

const path = require("path");
module.exports={

//入口文件的配置项
entry:{
    entry:"./src/entry.js"
},
//出口文件的配置项
output:{
    //输出的路径，用了Node语法
    path:path.resolve(__dirname,"dist"),
    //输出的文件名称
    filename:"bundle.js"
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}

}
4.这个代码写完后，可以在终端中直接输入webpack就会进行打包。

在实际开发中我们都是通过配置文件进行打包的，所以必须要掌握好。

5.多入口、多出口配置

Webpack在版本1的时候很难设置多出口文件，但是在2版本开始就变的很方便了。直接看多入口和多出口的文件配置，然后可以和单一出口对比一下，你会发现这种设置非常简单（只需改动两点配置就可以）。
const path = require("path");
module.exports={

//入口文件的配置项
entry:{
    entry:"./src/entry.js",
    //这里我们又引入了一个入口文件
    entry2:"./src/entry2.js"
},
//出口文件的配置项
output:{
    //输出的路径，用了Node语法
    path:path.resolve(__dirname,"dist"),
    //输出的文件名称
    filename:"[name].js"
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}

}

[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。

云服务器 GPU云服务器本月的第一天js 第一天周第一天机器学习学习之路

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94813.html

Webpack4 高手之路 第一天

摘要：基础配置安装配置这里默认已经安装了环境检查是否安装命令创建项目文件夹例如创建如下文件夹创建配置项或者此时生成文件全局安装和在项目文件夹中安装和安装结束后在编辑器中打开项目打开文件，出现和的版本号，即表示安装成功配置 Webpack 基础配置01 安装配置这里默认已经安装了node环境检查node是否安装命令 node -v 创建项目文件夹例如创建如下文件夹 web...

lavnFan 2019-08-23 15:26 评论0 收藏0
webpack学习实践第一天

摘要：学习实践第一天安装参考文档中文文档安装篇中文文档创建文件夹并且进入创建的文件夹初始化一个新的文件，使用跳过询问阶段。查看目录结构接下来按中文文档安装篇教程演练。中文文档对该实例的说明在此示例中，标签之间存在隐式依赖关系。 webpack学习实践第一天 By Ylise 1.安装webpack 参考文档： 1.webpack中文文档安装篇 2.Lodash中文文档 1.创建文件夹...

caohaoyu 2019-08-26 10:13 评论0 收藏0
webpack入门学习手记（四）

摘要：本人微信公众号前端修炼之路，欢迎关注。再过一天，就是年了，在这里祝大家新年快乐，阖家欢乐，万事大吉。 showImg(https://image-static.segmentfault.com/230/457/2304574665-5c1373e5a1763_articlex); 本人微信公众号：前端修炼之路，欢迎关注。再过一天，就是2019年了，在这里祝大家新年快乐，阖家欢乐，万事...

ygyooo 2019-08-23 14:24 评论0 收藏0
[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上

摘要：接着上文，重新在文件夹下面新建一个项目文件夹，然后用初始化项目的配置文件，然后安装，然后创建基本的项目文件夹结构，好了，我们的又一个基本项目结构就搭建好了第一开始通过文件配置我们的项目首先在项目文件夹下面，新建一个文件，这个文件可接着上文，重新在webpack文件夹下面新建一个项目文件夹demo2，然后用npm init --yes初始化项目的package.json配置文件，然后安...

moven_j 2019-08-21 16:27 评论0 收藏0