Webpack,小白入门,包教不包会。

本篇写于2019.10.21,当前webpack的版本为4.X.X。目的是在于能够将小白入门,并且自己会搭建webpack的相关插件以及一些其他的loader之类的。好了,话不多说,我们开始写吧!

什么是Webpack,以及我们为什么要用他。

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

  • 模块化,让我们可以把复杂的程序细化为小的文件;
  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
  • Scss,less等CSS预处理器

WebPack和Grunt以及Gulp相比有什么特性

借用两张图表示的话就是。 gulp:

  • gulp是在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务

webpack:

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

开始使用webpack

// 先全局安装webpack
npm install -g webpack

现在,我们新建一个文件夹

// 使用npm init
npm init
// init是创建package.json用的,创建的时候叫你填写一些信息,
// 不用管它,对于现在的我们来说先不用了解,然后我们一路回车。

// 安装局部webpack
npm install --save-dev webpack

我们现在在package.json文件所在的文件夹里面创建两个文件夹apppublic. 此时,我们的项目结构如下图所示。

现在叫我们在app文件夹里面创建main.jspublic文件里面创建index.html

现在,我们的项目目录结构是这样的: 我们现在要学会第一次打包,先配置webpack配置文件。 在当前目录下,新建一个webpack.config.js的配置文件文件里面内容为

// webpack.config.js
module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

现在将index.html文件里面写上一些基础的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
  <script>
  </script>
</body>
</html>

看到index.html上有一个id为root的dom元素,还有一个script标签,里面指向内容为bundle.js现在还不理解上面的东西,没关系。接着往下看。 先在app/main.js里面写上一段代码

document.getElementById('root').innerText = 'webpack好好玩,我好喜欢玩这个啊!'

package.json里面写上

{
  "name": "sfwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"  // 修改这里,json文件不支持注释,复制完成请删除
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  }
}

npm的start命令是一个特殊的脚本名称,其特殊性表现在,在命令行中使用npm start就可以执行其对于的命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}npm run build,我们在命令行中输入npm start试试,

可以看到,我们已经打包成功了!将main.js变为了bundle.js并且将他输出到了public的文件夹下。 到此为止,我们已经知道了在刚才的index.html文件里面bundle.js和id为root的dom元素是干什么了吧? 我们现在打开public文件夹下的index.html文件,能够看到页面上显示的是webpack好好玩,我好喜欢玩这个啊!现在,先别急着往下走。我们先来看看控制台的提示 它对我们警告,需要配置mode,这里先不用管它,我们后面会讲这一点,这也是webpack4新加的一个功能。

你现在已经成功的打包了一个webpack文件,这会是一个良好的开始!!!

现在,我们还必须手动刷新网页,每次更改后都会按下F5,使得调试极其不容易,所以我们现在想要代码一更新就会自动加载。

// 安装webpack-dev-server
npm install --save-dev webpack-dev-server

这个webpack-dev-server是基于node.js构建的一个本地服务器,简单来说就是能够让你不刷新的情况下,看到更改后的内容 devserver作为webpack配置选项中的一项,以下是它的一些配置选项,更多配置请参考官网,这里给出一些配置信息

devserver的配置选项功能描述
contentBase默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)
port设置默认监听端口,如果省略,默认为”8080“
inline设置为true,当源文件改变时会自动刷新页面

把下面的命令假如到webpack.config.js文件里面

module.exports = {
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
      path: __dirname + "/public",//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
      },
  }

将下面的命令加入到package.json文件中

"server":  "webpack-dev-server --open"

我们运行 npm run server就可以看到,浏览器自动打开一个页面,我们修改main.js里的文件内容

// main.js
document.getElementById('root').innerText = '我好喜欢玩这个啊!'

能够看到浏览器自动刷新,不需要我们手动修改它了。

Loaders

loaders是webpack的核心功能了,它的主要作用是将ES6转换为浏览器识别的ES5或者说将LESS/SCSS编译为CSS等等。好了,我们看看如何使用loaders了。

  • test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)
  • loader:loader的名称(必须)
  • include/exclude: 手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
// 安装vue
npm install vue

未完待续。。。。

原文链接:segmentfault.com

上一篇:初探 node events模块
下一篇:在使用百度的人脸识别的时候有几个需要注意的地方(主要是一些报错)

相关推荐

  • 🚀webpack 4 beta — try it today!🚀

    Now that webpack is a 0CJS (Zero Configuration) outofthebox bundler, we will lay groundwork in 4.x a...

    2 年前
  • 🔥一步一步的带你走进Webpack4的世界

    前言 webpack是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散的模块按照依赖和规则打包成符号生产环境部署的前端资源,还可以将按需加载的模块进行代码分割。

    3 个月前
  • (独家!)webpack 5 changelog 全文翻译

    ★ webpack 团队于北京时间 10 月 12 日凌晨发布了 版本,本文译自 。此部分主要面向非插件开发的 webpack 使用者。 ” 简要说明 此版本重点关注以下内容: ...

    8 个月前
  • 面试必备!webpack 中那些最易混淆的 5 个知识点

    前两天为了优化公司的代码打包项目,恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的,之前看过 webpack 的旧文档,比我们内部项目的文档还要简陋。

    1 年前
  • 面试官:请手写一个webpack4.0配置

    确认过眼神,你还是没有准备秋招的人?时间仓促。自京东6月8号开启管培生的招聘,就意味着秋招的开始。然而你还在等着秋天的到来?今年形势应该更为严峻,随着各大技术(vue,webpack,react,微信...

    2 年前
  • 随着WebPACK定义全局变量

    随着WebPACK定义全局变量...

    2 年前
  • 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差。为此我们需要减少vendor.js的体积,从本...

    2 年前
  • 配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境

    前后端分离的项目开发中,我们有开发环境、测试环境、预生产环境和生产环境。 1、开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根...

    2 年前
  • 配置WebPACK允许浏览器调试

    Jim(https://stackoverflow.com/users/1481240/jim)提出了一个问题:Configure webpack to allow browser debugging...

    2 年前
  • 通过webpack引入第三方库

    一般来说,引入第三方库有一下三种情况: 1. 通过CDN引入; 2. 通过npm 安装并引入; 3. 第三方js文件就在本地 通过CDN 这是最简单的一种方式,例如引入高德地图,可以直接...

    2 年前

官方社区

扫码加入 JavaScript 社区