资讯专栏INFORMATION COLUMN

小白上学のWebpack零基础学习指导

spademan / 2753人阅读

摘要:以上代码功能很简单,就是把定义为一个模块,在中引用,最终两文件中要添加的内容都显示在中。我们的任务完成了,成功生成,合并,引入了,被执行了。安装,处理文件。

前言:

</>复制代码

  1. 本套教程是零基础学打包工具webpack;
  2. 后面会结合gulp+webpack搞定所有你得需求;

闲谈:

</>复制代码

  1. 百度搜了一下,虽然教程多,但是杂乱无章,实用的没多少,都是匆匆了事,所以我就自己学了两天,现在从最底层教大家完成webpack的常用功能,后期我会再写一篇gulp+webpack的前端神器文章,但我也要学好了再给大家发^_^!

nodejs安装:

</>复制代码

  1. 1.https://nodejs.org/en/download/ 选择对应自己的下载安装,命令行工具测试node -v是否成功;

smart-npm优化下载速度:

</>复制代码

  1. 2.安装完node后再测试一些 npm -v 命令是否成功,由于npm连接外网会经常下载插件会卡,推荐大家使用smart-npm
  2. 在CMD命令窗口中输入:npm install --global smart-npm@1 --registry=https://registry.npm.taobao.org/
  3. 安装完成后会自动替换当前npm,这时候你再试试安装其他的插件是不是很快了^_^?!

webpack全局安装:

</>复制代码

  1. 3.CMD命令窗口中输入:npm install -g webpack

新建项目:

</>复制代码

  1. 4.新建文件夹命名为webpack,如果你建立在D:test/webpack 在cmd命令窗口依次输入d: 、cd testcd webpack 现在我们已经进入我们新建的webpack文件夹输入:


一直按回车;完成后现在项目里面就有一个package.json, 我们多加一点东西;建立以下文件:

</>复制代码

  1. /app
  2. index.js
  3. pro.js
  4. package.json
  5. webpack.config.js

添加了两个js文件,添加了最重要的webpack->webpack.config.js的配置文件(文件名字不能更改),我们还是从简单的hello world开始吧,webpack原生直接支持AMD和CommonJS两种模块;

JS代码

pro.js

//我们这里使用CommonJS风格

</>复制代码

  1. function generateText() {
  2. var element = document.createElement("h2");
  3. element.innerHTML = "Hello h2 world";
  4. return element;
  5. }
  6. module.exports = generateText;//module.exports这个函数会把generateText方法暴露给全局在其他js中就可以引用了, exports相当于导出,后面index.js中的require就是导入;

index.js

</>复制代码

  1. var pro = require("./pro");//填写模块路径,导入文件后缀的js可以省略。
  2. var app = document.createElement("div");
  3. app.innerHTML = "

    Hello World

    ";
  4. app.appendChild(pro());
  5. document.body.appendChild(app);

以上代码功能很简单,就是把pro.js定义为一个模块,在index.js中引用,最终两文件中要添加的内容都显示在index.html中。

配置Webpack

现在开始配置webpack,目标是把这两个js文件合并成一个文件. 我们可以自己在build文件夹里面手动建一个index.html文件夹,然后再把合并以后的js引用在里面,但是这样有些麻烦,所以我们这里安装一个plugin,可以自动快速的帮我们生成HTML。

</>复制代码

  1. npm install html-webpack-plugin --save-dev

好 有了这个插件 开始写webpack.config.js文件

</>复制代码

  1. var path = require("path");//node 引入自带方法
  2. var HtmlwebpackPlugin = require("html-webpack-plugin");
  3. //定义了一些文件夹的路径
  4. var ROOT_PATH = path.resolve(__dirname);//__dirname是获取当前文件的绝对路径,注意双下划线
  5. var APP_PATH = path.resolve(ROOT_PATH, "app");
  6. var BUILD_PATH = path.resolve(ROOT_PATH, "build");
  7. module.exports = {
  8. //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  9. entry: APP_PATH,
  10. //输出的文件名 合并以后的js会命名为bundle.js
  11. output: {
  12. path: BUILD_PATH,
  13. filename: "bundle.js"
  14. },
  15. //添加我们的插件 会自动生成一个html文件
  16. plugins: [
  17. new HtmlwebpackPlugin({
  18. title: "Hello World app"
  19. })
  20. ]
  21. };

然后在项目根目录运行

</>复制代码

  1. D:
  2. estwebpack>webpack

终端显示一堆信息,然后告诉你成功了。

你可以使用webpack --help看看一些运行的时候可选的参数

你会发现多出来一个build文件夹,直接点开里面的html文件,你会发现我们可爱的“hello world”已经插入到页面了。我们的任务完成了,成功生成html,合并js,html引入了js,js被执行了。

配置webpack-dev-server

上面任务虽然完成了,但是我们要不断运行程序然后查看页面,所以最好新建一个开发服务器,可以serve我们pack以后的代码,并且当代码更新的时候自动刷新浏览器。

安装webpack-dev-server

</>复制代码

  1. npm install webpack-dev-server --save-dev

安装完毕后 在webpack.config.js中添加配置

</>复制代码

  1. module.exports = {
  2. ....
  3. devServer: {
  4. historyApiFallback: true,
  5. hot: true,
  6. inline: true,
  7. progress: true,
  8. }
  9. ...
  10. }

然后再package.json里面配置一下运行的命令,npm支持自定义一些命令

</>复制代码

  1. ...
  2. "scripts": {
  3. "start": "webpack-dev-server --hot --inline"
  4. },
  5. ...

好了,在项目根目录下输入npm start,一堆信息后server已经起来了,在浏览器里面输入http://localhost:8080 发现伟大的hello world出现了,在js里面随便修改一些输出然后保存, 浏览器自动刷新,新的结果出现了。

添加CSS样式

现在来添加一些样式,webpack使用loader的方式来处理各种各样的资源,比如说样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style标签中。

安装我们的loader

</>复制代码

  1. npm install css-loader style-loader --save-dev

配置loader,在webpack.config.js中

</>复制代码

  1. devServer: {
  2. historyApiFallback: true,
  3. hot: true,
  4. inline: true,
  5. progress: true,
  6. },
  7. ...
  8. module: {
  9. loaders: [
  10. {
  11. test: /.css$/,
  12. loaders: ["style", "css"],
  13. include: APP_PATH
  14. }
  15. ]
  16. },
  17. ...
  18. plugins: [
  19. new HtmlwebpackPlugin({
  20. title: "Hello World app"
  21. })
  22. ]

看loaders的书写方式,test里面包含一个正则,包含需要匹配的文件,loaders是一个数组,包含要处理这些程序的loaders,这里我们用了css和style,注意loaders的处理顺序是从右到左的,这里就是先运行css-loader然后是style-loader.

新建一个样式文件 main.css

</>复制代码

  1. h1 {
  2. color: red;
  3. }

记得在入口文件index.js中引用

</>复制代码

  1. require("./main.css");

然后发现标题变成红色的了,webpack的理念是基于项目处理的,把对应的文件格式给对应的loader处理,然后你就不用管了,它会决定怎么压缩,编译。

那现在想使用一些有爱的css预编译程序,来点sass吧。 你可能已经想到了,再来个loader就行啦,确实是这样简单。

</>复制代码

  1. npm install sass-loader --save-dev

稍微修改一下webpack.config.js,删掉我们先前添加的css规则,加上下面的loader

</>复制代码

  1. {
  2. test: /.scss$/,
  3. loaders: ["style", "css", "sass"],
  4. include: APP_PATH
  5. },

添加两个sass文件,variables.scss和main.scss

variables.scss

</>复制代码

  1. $red: red;

main.scss

</>复制代码

  1. @import "./variables.scss";
  2. h1 {
  3. color: $red;
  4. }

在index.js中引用

</>复制代码

  1. require("./main.scss");

然后发现标题如愿变红,相当简单吧。

处理图片和其他静态文件

这个和其他一样,也许你也已经会玩了。安装loader,处理文件。诸如图片,字体等等,不过有个神奇的地方它可以根据你的需求将一些图片自动转成base64编码的,为你减轻很多的网络请求。

安装url-loader

</>复制代码

  1. npm install url-loader --save-dev

配置config文件

</>复制代码

  1. {
  2. test: /.(png|jpg)$/,
  3. loader: "url?limit=40000"
  4. }

注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片。

下面举个栗子。

新建一个imgs文件夹,往里面添加一张崔叔的照片。在scss文件中添加如下的东西。

</>复制代码

  1. @import "./variables.scss";
  2. h1 {
  3. color: $red;
  4. background: url("./imgs/avatar.jpg");
  5. }

npm start, 然后查看图片的url,用浏览器审查元素看到生成了best64位码的图片编码,建议一些图标什么的用此功能。
添加第三方库

有的时候还想来点jquery,moment,undersocre之类的库,webpack可以非常容易的做到这一点,有谣言说Bower即将停止开发了, 作者推荐都使用npm来管理依赖。那么我们现在安装在我们的app中添加jquery和moment的支持。

</>复制代码

  1. npm install jquery --save-dev

在js中引用

</>复制代码

  1. var pro = require("./pro");
  2. var $ = require("jquery");
  3. var app = document.createElement("div");
  4. app.innerHTML = "

    Hello World it

    ";
  5. document.body.appendChild(app);
  6. app.appendChild(pro());
  7. $("body").append("

    look at me! now is " + new Date() + "

    ");

看看浏览器,成功! jquery现在都起作用了!

开发技巧

启用source-map

现在的代码是合并以后的代码,不利于排错和定位,只需要在webpack.config.js中添加

</>复制代码

  1. ...
  2. devtool: "eval-source-map",
  3. ...

这样出错以后就会采用source-map的形式直接显示你出错代码的位置。

配置webpack-dev-server代理

一个典型的例子就是前后端分离。后端是的server不管用什么写的。假定在本机他是类似http://localhost:5000/api/*这类的请求,现在添加配置让ajax请求可以直接proxy过去。

</>复制代码

  1. devServer: {
  2. hot: true,
  3. inline: true,
  4. //其实很简单的,只要配置这个参数就可以了
  5. proxy: {
  6. "/api/*": {
  7. target: "http://localhost:5000",
  8. secure: false
  9. }
  10. }
  11. }

重启以后 发现/api/*的请求都代理到http://localhost:5000去了~
安装jshint检测js语法

</>复制代码

  1. npm install jshint-loader --save-dev

在config文件中配置

</>复制代码

  1. module: {
  2. ...
  3. //和loaders一样的语法,很简单
  4. perLoaders: [
  5. {
  6. test: /.jsx?$/,
  7. include: APP_PATH,
  8. loader: "jshint-loader"
  9. }
  10. ]
  11. }
  12. ...
  13. //配置jshint的选项,支持es6的校验
  14. jshint: {
  15. "esnext": true
  16. },

好了 现在每次npm run start的时候就可以看到jshint的提示信息咯
有时某些插件都需要全文件使用例如:jquery
webpack提供一个插件 把一个全局变量插入到所有的代码中,在webpack.config.js里面配置

</>复制代码

  1. ...
  2. plugins: [
  3. new HtmlwebpackPlugin({
  4. title: "Hello World app"
  5. }),
  6. //provide $, jQuery and window.jQuery to every script
  7. new webpack.ProvidePlugin({
  8. $: "jquery",
  9. jQuery: "jquery",
  10. "window.jQuery": "jquery"
  11. })
  12. ]
  13. ...

分离app.js和第三方库

现在我们build出来的只有一个bundle.js 如果第三方库很多的话,会造成这个文件非常大,减慢加载速度,现在我们要把第三方库和我们app本身的代码分成两个文件。

修改entry入口文件

</>复制代码

  1. entry: {
  2. app: path.resolve(APP_PATH, "index.js"),
  3. //添加要打包在vendors里面的库
  4. vendors: ["jquery", "moment"]
  5. },

添加CommonsChunkPlugin

</>复制代码

  1. plugins: [
  2. //这个使用uglifyJs压缩你的js代码
  3. new webpack.optimize.UglifyJsPlugin({minimize: true}),
  4. //把入口文件里面的数组打包成verdors.js
  5. new webpack.optimize.CommonsChunkPlugin("vendors", "vendors.js"),
  6. new HtmlwebpackPlugin({
  7. title: "Hello World app"
  8. })
  9. ]

添加完毕 运行npm run build
在build文件夹中发现如下结构

budle.js
index.html
vendors.js

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

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

相关文章

  • 小白上学Webpack基础学习指导

    摘要:以上代码功能很简单,就是把定义为一个模块,在中引用,最终两文件中要添加的内容都显示在中。我们的任务完成了,成功生成,合并,引入了,被执行了。安装,处理文件。 前言: 本套教程是零基础学打包工具webpack; 后面会结合gulp+webpack搞定所有你得需求; 闲谈: 百度搜了一下,虽然教程多,但是杂乱无章,实用的没多少,都是匆匆了事,所以我就自己学了两天,现在从最底层教大家完成we...

    陈伟 评论0 收藏0
  • 小白上学Webpack基础学习指导

    摘要:以上代码功能很简单,就是把定义为一个模块,在中引用,最终两文件中要添加的内容都显示在中。我们的任务完成了,成功生成,合并,引入了,被执行了。安装,处理文件。 前言: 本套教程是零基础学打包工具webpack; 后面会结合gulp+webpack搞定所有你得需求; 闲谈: 百度搜了一下,虽然教程多,但是杂乱无章,实用的没多少,都是匆匆了事,所以我就自己学了两天,现在从最底层教大家完成we...

    Galence 评论0 收藏0
  • 小白上学webpack+vue初级使用指南

    摘要:但我们今天学的是,原因我还不会而且新手还是学习为主吧。原因中文文档全,学习曲线简单,很容易上手。后续总结在学习打包工具过程中由于出现的问题各种蛋疼,让很多人都半途而废。大家互相学习共同进步本节讲的都是很基础的东西,自己可以延展一下。 写这篇文章的时候先说一下原因:webpack:现在很流行的打包工具;推荐原因:学习成本比gulp,fis3等简单,就是这么直接!vue:国人开发的MVVM...

    PascalXie 评论0 收藏0
  • 小白上学canvas基础

    摘要:二次以及三次贝塞尔曲线都十分有用,一般用来绘制复杂有规律的图形。绘制三次贝塞尔曲线,为结束点,为控制点一,为控制点二。下边的图能够很好的描述两者的关系,二次贝塞尔曲线有一个开始结束点蓝色以及一个控制点红色,而三次贝塞尔曲线使用两个控制点。 元素 看起来和 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上, 标签只有两个属性—— width和height。当没有...

    zhaot 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<