webpack 的使用教程

今天接触webpack，就着官网上的教程一步一步的玩，把自己的理解总结以便和大家交流

webpack的主要特点

1. 可以把js,css,image,甚至文本当成模块来处理，并通过require()的方法来调用。
2. 能够自动识别模块之间的依赖。

webpack的安装,通常是使用npm。

创建一个文件夹vue-webpack-basic,使用命令行进入该文件夹，输入npm install webpack,当然你也可以使用全局安装 npm install webpack -g

2. 配置

  1. 在项目的根目录上创建配置文件 webpack.config.js,它的作用如同常规的 gulpfile.js/Gruntfile.js。
  1. 添加如下结构目录：

其中：

  • dist是最终文件生成的目录
  • lib 一些公共的类库
  • node_modules目录是通过npm安装的一些模块的目录所在，如jquery，vue等一些框架
  • src 是源码目录，开发时的文件都放在此目录下
  • index.html 应用入口页面
  • package.json项目描述文件
  • README.md 项目说明文件
  • webpack.config.js wepack工具的配置文件

各个文件的内容分别如下

index.html
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

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

</head>

<body>

	<div class="name"></div>

</body>

</html>

只需要在html文件中引入入口文件entry

entry.js
require('../css/index.css');

var $ = require('jquery');

console.log($('body'));

$(function(){

	$('.name').text("通过jq录入的数据");

});

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

注意：webpack 内置的功能只能处理js，如果想要通过require()的方法来调用css，image等其他格式的文件，需要使用相应的插件：

  1. 使用css-loader和style-loader通过require()来调用css

    • 安装插件 npm install css-loader style-loader
  2. 在webpack中使用第三方库，只需要在根目录使用npm install packageName 下载安装需要的库，然后在webpack页面中通过require()的形式加载进来，就可以直接使用了。如此处的jquery。
content.js
module.exports = "It works from content.js.";

即便是文本也可以使用CommonJs的加载到js文件中。

index.css
body{

	background-color: green;

}
执行命令 webpack src/js/entry dist/app.js --modulebind 'css=style!css',即可生成最终的打包文件.

运作的流程大概如下

通过入口文件entry.js加载content.js和style.css，然后把entry.js生成到dist/app.js中，在html中直接引入文件app.js即可。

附上效果图

是否觉得上面的命令太长了，感觉太土了？不用怕，那些参数我们都是可以通过配置文件来配置的。
module.exports = {

    entry: "./src/js/entry.js",

    output: {

        path: "./dist",

        filename: "app.js"

    },

    module: {

        loaders: [

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

        ]

    }

};
  • entry:指定入口文件
  • output:指定输出文件
  • module.loaders:指定加载器，在webpack中，可以配置各种各样的加载器，这样我们就不需要担心sass，less，等一些文件的编译问题了。

现在我们就可以直接的使用命令webpack来编译和调试我们的应用了，另外，我们还可以加入--watch 参数,这样每次有改动的时候就不需要重新编译应用了。

接下来还会有更加详细的参数使用和说明，包括各种插件的使用，还有和glup的配合使用。我会在学习的过程中一一做记录,同时直播出来和大家共同交流学习

webpack 的使用教程的更多相关文章

  1. WebPack 简明学习教程

    WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...

  2. webpack快速掌握教程

    转载http://yijiebuyi.com/blog/46fb97b11fb8f4055e0b04d1cecb1f69.html #为什么用webpack 如果我们 前端 javascript 能像 ...

  3. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

  4. Webpack简易入门教程

    <!-- 其实网上关于webpack的教程已经很多了,但是本人在学习过程中发现很多教程有错误,或者写的很不全面,结果做的过程出现各种各样的问题,对新手不但不友好还会让人浪费很多不必要的时间.所以 ...

  5. webpack轻松入门教程

    webpack之傻瓜式教程及前端自动化入门 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpa ...

  6. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  7. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  8. webpack CommonsChunkPlugin详细教程

    1.demo结构: 2.package.json配置: { "name": "webpack-simple-demo", "version" ...

  9. webpack入门操作教程

    1. webpack介绍 在传统的项目中,一个html文件可能会加载多个js.css文件,如果多人协同开发的话,就会出现全局变量被污染.文件直接的依赖问题 而webpack打包工具,会先分析入口文件的 ...

随机推荐

  1. leetcode Single Number II - 位运算处理数组中的数

    题目描述: 给定一个包含n个整数的数组,除了一个数出现一次外所有的整数均出现三次,找出这个只出现一次的整数. 题目来源: http://oj.leetcode.com/problems/single- ...

  2. redis学习三 redis持久化

      1,快照持久化 1简介      redis可以通过创建快照来获得某个时间点上的内存内容的数据副本,有了副本之后,就可以将副本发送到其他redis服务器上从而创建相同数据的从服务器,同时快照留在原 ...

  3. javascript——对象的基础知识

    一.javascript作为脚本语言可以完成以下任务: 操纵浏览器对象,如窗口的打开与关闭: 操纵Dom树: 通过XMLHttpRequest对象与服务器端进行异步通信: XML编程,借助于Activ ...

  4. 触摸事件MultiTouch Events

    备注: userInteractionEnabled = NO hidden = YES alpha = 0.0~0.01    //如果上面三个属性被设置了则无法接收触摸事件 1.- (void)t ...

  5. xcode减小静态库的大小(转)

    减小静态库的大小 编译生成的.a文件太大,但又没有冗余的文件可以删除已减少体积,找了很久才找到解决办法,如下: Build Settings-->Generate Debug Symbols 将 ...

  6. Android Notification通知

    /** * 在状态栏显示通知 */ private void showNotification(){ // 创建一个NotificationManager的引用 NotificationManager ...

  7. Python 黑客 --- 001 UNIX口令破解机

    Python 黑客 实战:UNIX口令破解机 使用的系统:Ubuntu 14.04 LTS Python语言版本:Python 2.7.10 V crypt 库是Python内置的库.在UNIX系统使 ...

  8. Qt测试计算时间

    博客转载自:https://blog.csdn.net/lg1259156776/article/details/52325508 一.标准C和C++都可用 1. 获取时间用time_t time( ...

  9. 前端学习笔记2017.6.12 HTML的结构以及xhtml、html、xml的区别

    HTML的结构 一个HTML文档可分为几个部分,如下图所示: DOCTYPE部分.head部分和body部分 DOCTYPE部分,这个很重要,可以理解为不同的DOCTYPE意味着不同的html标准,因 ...

  10. input标签name、value与id属性

    id是唯一标识符,不允许有重复值可以通过它的值来获得对应的html标签对象.相当于人的身份证具有唯一性 name:控件的名字,一个控件是否设置它的 name 属性是不会影响到这个网页的功能实现的.但是 ...