前言,如果按照官网的安装办法:

npm install webpack -g

安装的是最新版的,然后就莫名其妙的有问题(可以安装,但运行有问题)。我是小白,我也不知道具体原因,所以我换成2.5.1版本就OK了,先用这个,学习学习再深入。

一、安装

1. 先安装node.js (如果安装了就跳过)。

下载地址:http://nodejs.cn/download/

2. win+R 输入 cmd 打开命令行。

3. 1) 输入 node -v 查看node.js版本跟确认node安装好了;

2) 输入 npm -v 查看npm版本。

4. 选一个盘,例如我选E盘,新建一个demo文件夹

5. 在cmd里面输入 e: 进入E盘, cd demo 进入demo文件夹

    

6. 输入 npm init 初始化,一路回车,然后demo文件夹里面就会多一个package.json文件。

7. 然后就开始全局安装webpack,这里安装2.5.1版本,-g表示全局安装:

npm install webpack@2.5.1 -g

8. 接着在demo文件夹下也安装webpack,--save-dev 表示本地安装:

npm install webpack@2.5.1 --save-dev

输入 webpack - v 检查webpack安装好了没:

看来是OK了,回到demo文件夹,现在里面有一个 node_modules文件夹 + package.json + package-lock.json。

其它的不用管,就看package.json文件就好。

二、使用

1. 在demo文件夹下新建一个index.html文件,里面代码可以这么写:

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

细心的童鞋会发现不是没有bundle.js文件吗,引入它干嘛?对,等下就要用webpack给它生出来。

2. 再在demo文件夹下新建一个入口文件entry.js,就先写这个:

// entry.js
document.write('hello word.')

3. 见证效果的时候到了,在cmd输入 webpack entry.js bundle.js

    

出现这个,就说明编译成功了,回到demo文件夹,就会发现多出了一个文件 bundle.js,就是我们引入的JS文件了

第一个entry.js表示入口,第二个bundle.js表示输出内容。

打开index.html就会看到 hello word.。

初步使用webpack成功,不过,用命令行这样直接编译不仅容易出错,还麻烦,所以推荐使用配置文件来编译。

三、使用配置文件编译

1. 在demo文件夹里面新建一个js文件:webpack.config.js (为什么叫这个名字,因为这个是默认配置文件名称)

2. 输入如下代码:

entry 表示入口文件路径;

output 表示出口文件路径:

  • __dirname 表示当前目录下;
  • path 入口文件输出路径;
  • filename 输出文件名称;
var webpack = require('webpack')

module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
}

3. 在cmd输入 webpack ,可以看到跟刚才一样的效果。

四、配置css文件

1.webpack默认只能处理JavaScript 模块,想要处理其它类型的文件,例如css,就需要用到 loader 。

先按照需要的2个模块 css-loader 跟 style-loader (warn信息不用理它,error错误信息就要解决)

npm install css-loader
npm install style-loader

2. 配置文件 webpack.config.js 修改

红色字体为加入的代码

var webpack = require('webpack')

module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}

3. 在demo文件夹下新建一个style.css文件,写个body{background-color:red}

4. 在 entry.js 文件加入这个代码

require('./style.css')

5. 在cmd 上webpack一下

6. 打开index.js刷新,就看到红色背景了,说明运行成功。

五、webpack还有另一个重要的内容,就是插件。

1. 例如 BannerPlugin 插件,可以在输出的文件头部添加注释信息。

2. 在webpack.config.js文件里面加入代码:

var webpack = require('webpack')

module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by zhengshize')
]
}

3.webpack一下,刷新index页面在bundle.js里面最上方就能看到This file is created by zhengshize了(当然中文注释内容也是可以的)

六、每次都要去刷新页面很繁琐?用webpack-server-dev

1. 让编译的输出内容带有进度和颜色(跟使用webpack-server-dev无关,纯属为了好看点)

webpack --progress --colors

2. 全局安装webpack-server-dev

npm install webpack-server-dev@2.5.1 -g

3. 开启服务

webpack-dev-server --progress --colors

开启成功了,默认是 http://localhost:8080/ 地址,打开跟直接打开index.html是一样的,只不过这个是在本地服务器里面打开的,修改一个entry.js文件或者style.css文件,它就会自动刷新,而直接打开index.html文件的不会自动刷新。

webpack简单学习的入门教程的更多相关文章

  1. 学习Objective-C入门教程(分享)

    原百度文库连接:http://wenku.baidu.com/view/6786064fe518964bcf847c63.html PS:需要原文档的可以留邮箱发送! (我叫雷锋,不要谢我) 学习Ob ...

  2. 超简单!pytorch入门教程(五):训练和测试CNN

    我们按照超简单!pytorch入门教程(四):准备图片数据集准备好了图片数据以后,就来训练一下识别这10类图片的cnn神经网络吧. 按照超简单!pytorch入门教程(三):构造一个小型CNN构建好一 ...

  3. ADO.NET 学习笔记 入门教程

    本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=57&page=1&extra=#pid63 这是本人在 ...

  4. 简单的 Go 入门教程

    Go(又称 Golang )是 Google 开发的一种静态强类型.编译型.并发型,并具有垃圾回收功能的编程语言 Docker 和 Kubernetes 都是使用 Go 进行开发的,这几年 Go 越来 ...

  5. 超简单!pytorch入门教程(四):准备图片数据集

    在训练神经网络之前,我们必须有数据,作为资深伸手党,必须知道以下几个数据提供源: 一.CIFAR-10 CIFAR-10图片样本截图 CIFAR-10是多伦多大学提供的图片数据库,图片分辨率压缩至32 ...

  6. pytorch入门--土堆深度学习快速入门教程

    工具函数 dir函数,让我们直到工具箱,以及工具箱中的分隔区有什么东西 help函数,让我们直到每个工具是如何使用的,工具的使用方法 示例:在pycharm的console环境,输入 import t ...

  7. 最简单的STM32入门教程----闪烁LED

    本文讲述的是如何从零开始,使用keil建立一个简单的STM32的工程,并闪烁LED灯,给小白看. 第零步,当然首先你得有一个STM32的板子,其IO口上接了一个LED... 第一步,建立一个文件夹0. ...

  8. 史上最简单的Docker入门教程

    安装Ubuntu Docker 安装 CentOS Docker 安装 Windows Docker 安装 MacOS Docker 安装 这里我的电脑是mac,采用brew安装,安装完毕记得更换国内 ...

  9. HTML学习日记 入门教程 知识点 ing

    初学html,如有错误,欢迎指正谢谢. 这只是一些基础的知识点,是学习后自己想到总结的,不适合资深者. 1.href是Hypertext Reference的缩写.意思是指定超链接目标的URL.是cs ...

随机推荐

  1. P1444 [USACO1.3]虫洞wormhole

    luogu P1444 [USACO1.3]虫洞wormhole 首先感谢ghj的讲解 题目描述 农夫约翰爱好在周末进行高能物理实验的结果却适得其反,导致N个虫洞在农场上(2<=N<=12 ...

  2. Angular--TypeScript finalize 方法

    self._entityService .getAll() .pipe( finalize(() => { if (self.sheet && self.sheet.length ...

  3. php7 中?? 和 ?:的区别

    $b = $a?? $c ;相当于$b= isset($a)?$a:$c; $b = $a?: $c ;则是 $b = !empty($a) ? $a:$c;

  4. dp--hdu1171(01背包)

    hdu1171 题目 Problem Description Nowadays, we all know that Computer College is the biggest department ...

  5. oracle12c之三 控制PDB中CPU 资源使用

      CPU资源隔离 数据库中,不同的PDB对主机CPU资源使用要求不同,那么我们就可以使用CDB resourceplans来管理不同pdb对CPU资源的使用. CDB Resource Plans ...

  6. js 常见事件

  7. Angular 例子

    前提 angular-cli 是过时的 @angular/cli  用是主流 通讯录  Angular 从零到一 别人是在安装包的时候全程FQ,用蓝灯,每月700M的免费流量 nice fish  A ...

  8. ssh 端口转发实现外网 80 端口映射到内网 80 端口

    开发中经常需要外网服务映射到本机内网服务的需要,便于调试. 以前都是同事帮着配,这两天自己也看了一下 ssh 端口转发. 同事分分钟钟搞定的事情,自己折腾了 2 天, 真是弱爆了. 最初老想不明白一件 ...

  9. 关于sql通配符检索问题-【.NET】

    确定给定的字符串是否与指定的模式匹配.模式可以包含常规字符和通配符字符.模式匹配过程中,常规字符必须与字符串中指定的字符完全匹配.然而,可使用字符串的任意片段匹配通配符.与使用 = 和 != 字符串比 ...

  10. unity 工具开发基础

    using System.Collections; using System.Collections.Generic; using System.IO; using System.Text; usin ...