webpack简单学习的入门教程
前言，如果按照官网的安装办法：
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简单学习的入门教程的更多相关文章
- 学习Objective-C入门教程（分享）
原百度文库连接:http://wenku.baidu.com/view/6786064fe518964bcf847c63.html PS:需要原文档的可以留邮箱发送! (我叫雷锋,不要谢我) 学习Ob ...
- 超简单！pytorch入门教程（五）：训练和测试CNN
我们按照超简单!pytorch入门教程(四):准备图片数据集准备好了图片数据以后,就来训练一下识别这10类图片的cnn神经网络吧. 按照超简单!pytorch入门教程(三):构造一个小型CNN构建好一 ...
- ADO.NET 学习笔记 入门教程
本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=57&page=1&extra=#pid63 这是本人在 ...
- 简单的 Go 入门教程
Go(又称 Golang )是 Google 开发的一种静态强类型.编译型.并发型,并具有垃圾回收功能的编程语言 Docker 和 Kubernetes 都是使用 Go 进行开发的,这几年 Go 越来 ...
- 超简单！pytorch入门教程（四）：准备图片数据集
在训练神经网络之前,我们必须有数据,作为资深伸手党,必须知道以下几个数据提供源: 一.CIFAR-10 CIFAR-10图片样本截图 CIFAR-10是多伦多大学提供的图片数据库,图片分辨率压缩至32 ...
- pytorch入门--土堆深度学习快速入门教程
工具函数 dir函数,让我们直到工具箱,以及工具箱中的分隔区有什么东西 help函数,让我们直到每个工具是如何使用的,工具的使用方法 示例:在pycharm的console环境,输入 import t ...
- 最简单的STM32入门教程----闪烁LED
本文讲述的是如何从零开始,使用keil建立一个简单的STM32的工程,并闪烁LED灯,给小白看. 第零步,当然首先你得有一个STM32的板子,其IO口上接了一个LED... 第一步,建立一个文件夹0. ...
- 史上最简单的Docker入门教程
安装Ubuntu Docker 安装 CentOS Docker 安装 Windows Docker 安装 MacOS Docker 安装 这里我的电脑是mac,采用brew安装,安装完毕记得更换国内 ...
- HTML学习日记 入门教程 知识点 ing
初学html,如有错误,欢迎指正谢谢. 这只是一些基础的知识点,是学习后自己想到总结的,不适合资深者. 1.href是Hypertext Reference的缩写.意思是指定超链接目标的URL.是cs ...
随机推荐
- CSS 加号选择器（"+"）
加号选择器("+"):就是指对找到的某类的元素除第一个元素以外的兄弟元素起作用,即第一个元素不起作用,后面的兄弟元素都会起作用 效果:给每一个li加一个border-left, ...
- 用Javac编译Java文件时出现“编码 GBK 的不可映射字符“的error
前提:JDK版本 >= 1.6会出现编译报错, 1.6前只会是警告 以下是javac的document: 遇到这种情况的原因是: 文件编码格式与编译器编译所选的encoding不同,有非英文字符 ...
- Codeforces - 914C 数位DP
题意有点难以描述,简略的就是给定一个二进制\(n\),每一步操作能使\(n\)的位为1的数的和转化为一个十进制,然后转化为该数的二进制再进行相同的操作 查询\([0,n]\)中操作数恰好为\(k\)的 ...
- Chrome打开网页都提示Flash Player因过期而遭到阻止
1. 运行Chrome浏览器,地址栏输入:chrome://plugins/,找到pepflashplayer.dll安装位置, 如:D:\Program Files\GoogleChromePort ...
- Q791 自定义字符串排序
字符串S和 T 只包含小写字符.在S中,所有字符只会出现一次. S 已经根据某种规则进行了排序.我们要根据S中的字符顺序对T进行排序.更具体地说,如果S中x在y之前出现,那么返回的字符串中x也应出现在 ...
- FreeRTOS-04列表和列表项
根据正点原子FreeRTOS视频整理 单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 实验说明:1. 验证列表项的插入.末尾插入.删除操作备注: 末尾插入感觉不是末尾插入, ...
- Watchbog挖矿病毒程序排查过程
第1章 情况 1)服务器收到cpu报警,cpu被占用达到100%,登录服务器查看,发现cpu被一个watchbog的进程占满了,如下图所示: 2)并且无论如何都杀不掉,用kill杀掉后,其还是会隔一会 ...
- spark第十篇：Spark与Kafka整合
spark与kafka整合需要引入spark-streaming-kafka.jar,该jar根据kafka版本有2个分支,分别是spark-streaming-kafka-0-8和spark-str ...
- 2018年javaee学习目标
我打算在本学期的学习中把java ee掌握并能熟练应用,如果可以的话还打算编写一个后台服务程序,增加自己的实战经验.
- WPF的布局--StackPanel
1. StackPanel是以堆叠的方式来显示控件(从左到右,或者从上到下) 默认是从上到下显示的,并且宽度为StackPanel的宽度,高度自动适应控件中内容的高度(未对控件进行设置时) 如图: 代 ...