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

2019-11-04 admin

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

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

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

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

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

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

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

webpack: webpack.png

  • 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. 此时,我们的项目结构如下图所示。 image.png

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

现在,我们的项目目录结构是这样的: image.png 我们现在要学会第一次打包,先配置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试试,

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

未完待续。。。。

[转载]原文链接:https://segmentfault.com/a/1190000020894605

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78809.html

文章标题:Webpack,小白入门,包教不包会。

相关文章
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
何为闭包?有关JS闭包的一些理解
简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就...
2015-11-11
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
javascript教程:关于if简写语句优化的方法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法。尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化...
2015-11-12
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
回到顶部