最近在使用webpack 感觉棒棒哒 下面这个简单的教程可以让你走入webpack的世界

欢迎使用webpack

这个小教程通过简单的例子来引导大家使用webpack

通过这些这篇文章你可以学到

  • 如何安装webpack
  • 如何使用webpack
  • 如何使用加载器
  • 如何使用开发服务器

安装webpack

你的电脑上需要先安装node.js

$ npm install webpack -g

 这样就可以使用webpack命令

编码

在一个空的文件夹里创建一个文件

添加 entry.js

document.write("It works.");

添加 index.html

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>

    </body>

</html>

在当前文件夹下输入下面命令

$ webpack ./entry.js bundle.js

运行上面命令将会把entry.js编译为bundle.js,如果编译成功就会有下面的提示

在浏览器里打开index.html

第二个文件

接下来 我们把一些代码移到另一个文件

添加 content.js

module.exports = "It works from content.js."

修改 entry.js

-  document.write("It works");

+  document.write( require("./content.js));

然后继续编译

$ webpack ./entry.js bundle.js

刷新浏览器


> *webpack 会分析你的entry文件所依赖的其他文件，这些文件(也叫模块)也会被包含在你的bundle.js中，webpack会给每个模块一个唯一的id并且通过这些id很容易的保存所有模块到bundle.js。在启动时只有入口模块被调用执行，一个简单的运行提供了所需的功能并且在需要其他模块时执行依赖*

第一个加载器

我们希望在我们的应用里添加css文件

WebPack只能处理JavaScript本身，所以我们需要CSS加载器来处理CSS文件。我们还需要的样式装载在CSS文件应用的样式。

在控制台之行

npm install css-loader style-loader

来安装加载器（需要本地安装所以不需要-g 在项目文件夹里安装）安装后会在项目文件里创建一个node-modules 文件夹

接下来我们创建一个　style.css

body{background:＃ff0000;}

修改 entry.js

+require("!style!css!./style.css");

document.write(require("./content.js));

继续执行上面那句编译命令再刷新浏览器

通过前缀加载器这个模块儿以某种渠道被加载 这些加载器通过特殊的方式转换文件内容 转换后成为javascript模块

捆绑加载器

我们不希望写require("!style!css!./style.css");这么长么长的require

那么我们可以为加载器绑定文件扩展名 之后我们就可以直接写require("./style.css")这样

修改entry.js

- require("!style!css!./style.css");

+ require("./style.css");

  document.write(require("./content.js"));

编译

webpack ./entry.js bundle.js --module-bind 'css=style!css'

有些环境可能要在"css=style!css" 加双引号

配置文件

我们希望把所有的配置都放在一个配置文件里面

添加webpack.config.js文件

module.exports = {

    entry: "./entry.js",

    output: {

        path: __dirname,

        filename: "bundle.js"

    },

    module: {

        loaders: [

            { test: /\.css$/, loader: "style!css" }

        ]

    }

};

现在我们只需要在终端执行

webpack

webpack命令需要在webpack.config.js所处的文件目录下执行

一个有趣的输出

如果我们的项目文件较大需要一个较长时间的编译 编译时我们希望有一个带颜色的进度条展示 我们可以通过一下命令实现

webpack --progress --colors

监听模式

如果不想每次修改文件都去重新执行一遍命令我们可以用下面命令来监听文件变化并编译

webpack --progress --colors --watch

webpack在编译时可以缓存未改变的模块儿和输出文件

开发环境服务

这个主要是起了个node的sever服务可以在浏览器上通过设置的端口访问并且还能实时刷新页面的修改内容，非常方便实用哟

npm install webpack-dev-server -g

webpack-dev-server --progress --colors

本文翻译于 webpack官网开始教程

webpack初识！的更多相关文章

  1. webpack 初识

    Webpack介绍 webpack 官网 http://webpack.github.io/docs/ webpack 中文地址:https://doc.webpack-china.org/ webp ...

  2. webpack初识

    1.什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等) ...

  3. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  4. webpack初识(biaoyansu)

    1.是什么和为什么 在浏览器中的js之间如果需要相互依赖 src=a.js src=b.js src=c.js src=d.js 需要暴露出全局变量,而暴露出的这个全局变量是非常不安全的, 随着Nod ...

  5. 使用webpack loader加载器

    了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...

  6. webpack学习（二）初识打包配置

    前言:webpack打包工具让整个项目的不同文件夹相互关联,遵循我们想要的规则.想 .vue文件, .scss文件浏览器并不认识,因此webpage暗中做了很多转译,编译等工作. 事实上,如果我们在没 ...

  7. vue第一单元(初识webpack-webpack的功能-webpack的初步使用)

    第一单元(初识webpack-webpack的功能-webpack的初步使用) #课程目标 了解webpack出现的意义,以及webpack解决的前端问题 掌握webpack的使用流程和步骤 掌握we ...

  8. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

  9. 初识webpack——webpack四个基础概念

    前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...

随机推荐

  1. Impala源码之订阅发布系统的实现

    本文由  网易云发布. 作者:冯宇 本篇文章仅限内部分享,如需转载,请联系网易获取授权. 本文是Impala源码笔记的第一篇,本文主要根据源代码学习一下statestored模块的实现,众所周知,Im ...

  2. Java50道经典习题-程序12 计算奖金

    题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:    利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:     ...

  3. 深入了解java虚拟机（JVM） 第十一章 类的加载

    一.类加载机制概述 虚拟机把描述类的数据从class文件加载到内存并对数据进行效验,解析和初始化,最终形成可以被虚拟机直接使用的java类型,这就是虚拟机的类加载机制. 二.类加载的机制 类加载的过程 ...

  4. 【Oracle 12c】最新CUUG OCP-071考试题库（55题）

    55.(13-3) choose the best answer: Which statement is true regarding the SESSION_PRIVS dictionary vie ...

  5. “全栈2019”Java第一百零八章：匿名内部类与final关键字

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. sql语句中group by使用

    group by分组函数,group by name 将查询结果按照name进行分组,相同name的记录一组,配合聚合函数,显示每个name的情况.   1,数据源 表A结构如下: CREATE TA ...

  7. (转)Javascript模块化编程（二）：AMD规范

    转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...

  8. 《条目二十九：对于逐个字符的输入请考虑istreambuf_iterator》

    <条目二十九:对于逐个字符的输入请考虑istreambuf_iterator> 1.使用: ifstream inputfile("xxxx"); string fil ...

  9. 解决无法运行Terminator出现以下问题： File "/usr/bin/terminator"...SyntaxError: invalid syntax

    在安装或者启动Terminator时可能出现这个问题: lin@Dev:~$ terminator File "/usr/bin/terminator", line 123 exc ...

  10. 【Quartz】基本原理

    1 核心概念 1.1    核心元素 (1)Scheduler 任务调度器,是Quartz框架的核心,负责管理其他组件. (2)Trigger 触发器,用于定义任务调度的时间规则,有SimpleTri ...