最近在使用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. [.net]ConcurrentBag源码分析

    ConcurrentBag根据操作线程,对不同线程分配不同的队列进行数据操作.这样,每个队列只有一个线程在操作,不会发生并发问题.其内部实现运用了net4.0新加入的ThreadLocal线程本地存储 ...

  2. WPF绑定BitMapImage

    先说下图片文件存在服务器.wpf常用绑定图片地址没办法用.忽然想到,convert能否转字节数据?实验了下可以. 图片绑定字节数组. convert代码 public class PictureCon ...

  3. maven的jar路径、下载路径

    jar路径:在localRepository中填写先要放的位置 下载镜像:添加新的就可以 <mirror> <id>nexus-aliyun</id> <mi ...

  4. C#中Cookies的读取

    C#中Cookies的读取   链接: 一 .写入Cookie 1. Name 和 Value 属性由程序设定,默认值都是空引用. 2. Domain属性的默认值为当前URL的域名部分,不管发出这个c ...

  5. php—Smarty-缓存2（26）

    一个页面中,有些数据缓存,有些数据不缓存,就是局部缓存 l  $smarty->assign(“var”, “value”, true) 第三个参数:表示是否不缓存 l  {$var nocac ...

  6. Java笔记（一）GC及类加载

    垃圾回收器(GC)    垃圾回收器:java中有一个线程,专门负责JVM中垃圾内存的释放    垃圾:没有引用的内存节点    垃圾回收的算法    注意:垃圾回收有自己的算法,我们是不能控制垃圾回 ...

  7. 【Qt】VS2010编译Qt5.3.2 64bit

    1. 为什么要这么做 在Windows下,Qt官网默认提供的二进制版本大多是32位,目前(2015.01.24)只对VS2013提供了64位版本,如下图所示: 为了适应我目前安装的VS2010 IDE ...

  8. 为什么 React Elements 会有 $$typeof 这个属性？

    简评:debug 的时候看到 element 对象中有 $$typeof 这属性,于是查了一下这到底干嘛的. 我们知道,通过 JSX 创建一个 React Elements 时: <marque ...

  9. python------对于面向对象的理解

    python中一切皆为对象 其实面向对象没什么高大上的东西,只不过把我们平时对于事物的描述和动作系统的总结成了一个定义事物的方法而已. 我们平时向别人介绍一个他(她)从未见过的东西,会从外形和外貌特征 ...

  10. 正则表达式 IP域名

    不废话,我这个起码不坑人,有的把我坑死 var objRegExp = /^((([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))))\.)((([0-9]|([ ...