来自 软件资讯 2019-11-28 05:01 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

我整理了之前自学时候的学习资源分享给大家,

这些年从英特网学习有关node爬虫的学识,收拾了刹那间享用一下扒去尴尬事百科的进程。博主新人,刚上学,勿喷。早先时期会收拾好读书node的上学能源分享给我们。VUE学习财富在文章最后。

奥门威尼斯网址 1

从零初始:

众多尚未触及或刚接触Webpack的相恋的人总会以为Webpack很难,要设置那么些设置这些,要写一大堆的安顿,要输一大堆的一声令下,还要学一大堆的语法,感到学习花费太高,不用它代码也得以写得很好。是的,不过别挂念,本体系教程将会透过某个简便实例带您轻轻便松入门Webpack,相信当你实在精通它的时候,你料定会爱上它的!

1、首先必要的是安装node情形

1. 核心

① 入口② 输出③ loader④ 插件

切切实实的装置进程就不详细阐释了~请看那篇教程: 
Node.js 安装配备 
nodejs官网

2. 优势

① 模块化开荒(import,require卡塔尔② 预管理(Less,Sass,ES6,TypeScript……卡塔 尔(英语:State of Qatar)③ 主流框架脚手架扶助(Vue,React,Angular卡塔 尔(阿拉伯语:قطر‎④ 宏大的社区(能源丰裕,裁减学习花销卡塔 尔(英语:State of Qatar)

详细的情况请戳→作者干什么要运用Webpack?

检查测量试验安装是还是不是做到在命令行中输入: 
node -v 

3. 初读书人误区

① 要学会node.js② 只好用于简单的代码缩并③ 上线时要将总体项目文件上传服务器

如上几条都以初大家比较便于生出的误区,而其实……

① 大家确实必要设置node.js,但基本只是亟需它提供的遇到及npm而已,你不自然要精晓node.js语法② Webpack极其常有力,不仅能够实当代码的裁减归拢,仍然是能够开展部分预编写翻译管理甚至模块化开拓等③ 大家只须要将Webpack打包出来的文件目录上盛传服务器就可以,并不是上传整个项目文件

看可以还是不可以出示版本号

1. 安装node.js

Webpack本人是依赖node.js情状的,所以大家必要先安装node.js,具体方法能够看这里→Node.js——通往全栈之路。

 

奥门威尼斯网址 ,2. 新建项目

在新创设的项目文件夹下,创制多个根底文件夹:srcdist,个中src是大家开辟时源代码所放置的公文夹,dist是大家利用Webpack打包后代码输出的对象文件夹,也正是说最后大家上传服务器的代码都是从dist文件夹下获取。目录构造大意上如下:

奥门威尼斯网址 2

package.json文件是在node.js意况下支付品种一定要采纳到的文书,该文件重大用于配置项目入口、脚本和品种所需安装的依靠等等。大家能够协调手动创立,也能够经过命令行自动创造它。命令行创设很简短,直接在决定台终端输入npm init,然后间接回车就能够轻巧创立贰个最底工的package.json文件。

{ "name": "webpackdemo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC"}

小贴士: 提议选拔开辟工具中自带的主宰台终端,特别方便,自动定位当前项目文件夹,没有须求手动切换。比如本人利用的开采工具是WebStorm,调控台终端如下图:

奥门威尼斯网址 3Terminal

奥门威尼斯网址 4 

3. 安装Webpack

逐风度翩翩输入命令行npm i -D webpacknpm i -D webpack-cli回车开展本地安装,此中iinstall的缩写,-D--save-dev的缩写,也正是说那四个命令行也足以写成npm install --save-dev webpacknpm install --save-dev webpack-cli

安装后的目录构造如下:

奥门威尼斯网址 5

package.json文件如下:

{ "name": "webpackdemo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.5.0", "webpack-cli": "^2.0.14" }}

 

4. 新建webpack.config.js文件

该公文是Webpack的配置文件,也是种类运作的进口文件,底工写法如下:

module.exports = { entry: './src/scripts/index.js', // 需要被打包的js文件路径及文件名 output: { path: __dirname + '/dist', // 打包输出的目标文件的绝对路径(其中__dirname为当前目录的绝对路径) filename: 'scripts/index.js' // 打包输出的js文件名及相对于dist目录所在路径 }};

好的,安装到位~

1. 新建必要被打包的js文件

奥门威尼斯网址 6

大家给那一个index.js文件写入点代码:

//index.jsalert('Hello Webpack!');

2、接下去先河伊始化三个门类~

2. 启幕打包

输入命令行:npx webpack,回车。

是因为大家早已在webpack.config.js文件配置了包装的有关路径及文件名,所以最终包装后大家就能够在dist目录下看见大家想要的出口结果,打包后完全目录结构如下:

奥门威尼斯网址 7

有关编写制定代码的IDE,作者前不久用的是集成化学工业具是webstorm,轻量级的是sublime text3

3. 运用打包后的js代码

今昔大家早已拿到打包后的代码,接下去大家理应接受它,测验它是还是不是能符合规律运作。

我们能够在dist目录入手动成立二个HTML文件,并引进那几个已经打包成功的js文件。目录布局及HTML代码如下:

奥门威尼斯网址 8

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script src="scripts/index.js"></script></body></html>

开发那么些index.html页面后,我们开采浏览器弹出“Hello Webpack!”提示框,说后周码确实已经打包成功。

得逞运营Webpack基本流程如下:① 安装node.js② 创立项目目录和新建package.json③ 安装webpack和webpack-cli④ 新建webpack.config.js⑤ 开头打包你的js代码

结束语: 本文只是对Webpack成功打包js代码的最功底批注,如需掌握越来越多Webpack相关内容,请持续关心本类别教程,谢谢!

这里以webstorm为例

率先新建三个空荡荡的工程

奥门威尼斯网址 9

开创实现,其实就只是叁个创办了一个空的文本夹(那么些也可以因此选用命令行mkdir来创制贰个空文件夹,再进入文件夹内 )

点击下方的Terminal,把调节台点开(其实便是windows自带的命令行,其余系统同理卡塔 尔(英语:State of Qatar)

输入指令: npm init

这一步初叶化一个node工程,生成三个package.json来积攒工程的音讯

一同回车就能够

奥门威尼斯网址 10

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:我整理了之前自学时候的学习资源分享给大家,

关键词: