Webpack 入门(一):安装 / 打包 / 命令行
一:安装webpack和基本环境搭建
新建一个工作的文件夹(我取的名字叫Webpack)
打开命令行,cd进入该文件夹
//初始化一下npm
> E:\work\Webpack>npm init
然后按照提示输入这个项目的一些信息,不想填也可以一直按回车。
//安装Webpack
> E:\work\Webpack>npm install webpack --save-dev
如果这一步报错,说明你没有全局安装webpack,全局安装webpack的命令行是:
npm install webpack -g
这样一个webpack的基本框架就出来了,下面试一下它的打包功能
二:webpack的打包功能
在该工作文件夹下新建一个hello.js,随便输入一点函数
function hello(str){
alert(str);
}
然后在命令行中将这个hello.js打包为hello.bundle.js
> E:\work\Webpack>webpack hello.js hello.bundle.js
//这句命令的意思是将hello.js打包,并且打包后的文件名称为hello.bundle.js
//在打包过程中会生成一些webpack需要的require
然后同样的,在该项目下新建一个world.js,随便输入一点函数
function world(){
return{
//返回一个空
}
}
接下来,在hello.js中将这个函数引用进来
require('./world.js');
//要注意文件的引用路径,不然打包的时候会报错。
在命令行中打包hello.js(和上面一样的命令)
> E:\work\Webpack>webpack hello.js hello.bundle.js
可以在命令行窗口中看到提示信息:
其中:
Hash:表示这次操作的哈希值( 可以先不管 )
version:版本号
下面的信息主要表达的是: 这次打包中包含的文件,打开hello.bundle.js,可以在最后看到打包进去的代码块。
三:使用webpack打包css文件
接下来,我们在同样的层级下新建一个style.css
body{
background-color: pink;
margin: 0;
padding: 20px;
}
然后在hello.js中引入style.css
require('./style.css');
命令行中打包hello.js
> E:\work\Webpack>webpack hello.js hello.bundle.js
这时:你会发现报错了,报错信息:
重要看错误信息里面的:
> You may need an appropriate loader to handle this file type.
说明webpack是不支持css这种类型的,如果要支持css需要依赖loader的,解决方式如下:
命令行输入
> npm install css-loader style-loader --save-dev
回车安装loader,安装完毕之后,在hello.js中,要指定css文件的loader
//将之前写的require('./style.css');改成下面的语句
require('css-loader!./style.css');
//这句话的意思是在使用这个css文件之前必须经过loader的处理
在命令行中打包hello.js
> E:\work\Webpack>webpack hello.js hello.bundle.js
显示如上信息说明打包成功。
接下来,可以新建一个html文件,这个html文件中随便写点东西,并且要把打包后的文件hello.bundle.js文件引入进来。如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试webpack的Index测试</title>
<script src="hello.bundle.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
hello!!!
</body>
</html>
同时,我们需要在hello.js里面将刚刚写的函数执行,如下:
require('./world.js');
require('css-loader!./style.css');
function hello(str){
alert(str);
}
hello('hello echo!');
//这是要添加的
打开命令行,运行一次webpack hello.js hello.bundle.js
如上,打包完成。
然后在浏览器中打开刚刚写的html文件,发现hello.js被执行了
可是有一个问题,虽然我们执行了hello.js,但是在hello.js中引入的style.css却并没有被执行,这是因为在require的时候,除了指定css-loader,还需要指定style-loader,修改hello.js代码如下:
require('./world.js');
require('style-loader!css-loader!./style.css');
function hello(str){
alert(str);
}
hello('hello echo!');
使用命令行再次运行下,打开html文件,就会发现css样式已经被执行了。
打开浏览器的控制台查看源码可以得到:
css-loader作用是让webpack可以解析执行css文件,而style-loader是为了生成一个style标签,并且将解析后的css文件插入到style中去
那么又会出现一个问题,是不是我们以后每次写css,都要这样重复的去reqiure?
在webpack中可以全局的指定命令,将hello.js中的require(‘style-loader!css-loader!./style.css’); 修改为之前的require(‘./style.css’);
然后打开命令行,输入以下的命令
E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"
//window下的css=style-loader!css-loader需要使用""括起来,如果是Mac的要变成单引号。
打开html文件,css样式存在,说明指令已经生效。
可是还是有一个问题,就是当我们每一次修改文件的时候,都要重新执行一下命令行命令,可以说很麻烦了。
watch打包文件
所以在刚刚命令的基础上,我们可以修改下,让css自动更新,自动打包。命令如下:
> E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch
我们来测试一下,打开hello.js,随便更改一点内容,
require('./world.js');
require('./style.css');
function hello(str){
alert(str);
}
hello('hello echo!hhhhhh更改一下');
这时,不用再次在命令行中输入指令,直接打开浏览器刷新,可以发现刚刚修改的已经同步了。(感觉好玄幻哈哈哈哈哈)
四:webpack的其他指令
webpack还有很多其他的指令,比如:
1: - -progress 显示打包过程的进度
E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress
2:- -display-modules 显示打包的模块
E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress --display-modules
3: - -display-reasons 显示打包这些模块的原因
E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-load
Webpack 入门(一):安装 / 打包 / 命令行的更多相关文章
- mac安装GNU命令行工具
mac安装GNU命令行工具 2.添加的repo tap home/dupes brew install coreutils binutils diffutils ed -- ...
- 【分布式】ZooKeeper学习之一:安装及命令行使用
ZooKeeper学习之一:安装及命令行使用 一直都想着好好学一学分布式系统,但是这拖延症晚期也是没得治了,所以干脆强迫自己来写一个系列博客,从zk的安装使用.客户端调用.涉及到的分布式原理.选举过程 ...
- 【Mac】Mac OS X 安装GNU命令行工具
macos的很多用户都是做it相关的人,类unix系统带来了很多方面,尤其是经常和linux打交道的人. 但是作为经常使用linux 命令行的人发现macos中的命令行工具很多都是bsd工具,跟lin ...
- Django之win7下安装与命令行工具
Django之win7下安装与命令行工具 下载安装 pip3 install django 注意:自动添加环境变量 测试是否安装成功 1.输入python 2.输入import django 3.输入 ...
- 你使用 Web 平台安装程序命令行工具
你使用 Web 平台安装程序命令行工具 获取的软件由其所有者授权给你.Microsoft 未授予你第三方软件的任何权利.已成功加载主源: https://go.microsoft.com/?linki ...
- NodeJS 安装cnpm命令行工具
在安装之前,请确保已安装Git和NodeJS. cmd机内命令窗口,输入以下命令: git config --system http.sslcainfo /bin/curl-ca-bundle.crt ...
- webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误
一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...
- git版本控制 for window安装和命令行使用
Git 安装配置 Windows 平台上安装 在 Windows 平台上安装 Git 同样轻松,有个叫做 msysGit 的项目提供了安装包,可以到 GitHub 的页面上下载 exe 安装文件并运行 ...
- Sass学习之路:Sass、Compass安装与命令行
导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...
随机推荐
- JFreeChart生成饼形图(3) (转自 JSP开发技术大全)
JFreeChart生成饼形图(3) (转自 JSP开发技术大全) 14.3 利用JFreeChart生成饼形图 通过JFreeChart插件,即可以生成普通效果的饼形图,也可以生成3D效果的饼形图: ...
- 【HAOI 2015】 树上操作
[题目链接] 点击打开链接 [算法] 树链剖分 子树的DFS序是连续的一段! [代码] #include<bits/stdc++.h> using namespace std; #defi ...
- 洛谷 P2444 [ POI 2000 ] 病毒 —— AC自动机+dfs
题目:https://www.luogu.org/problemnew/show/P2444 AC自动机上 dfs,不走结尾点,如果走出环就是有无限长度的串: RE无数,原来是数组开成 2000 的了 ...
- 前端之html第二天
一.内容
- 版本控制系统Git
常用的版本控制系统有VSS.SVN.CVS等等,Git是最近几年使用得比较多的分布式版本控制系统,存在即合理,Git的出现总有它出现的理由,以前的版本控制系统肯定有一些不足的地方,所以才出现了Git. ...
- bzoj 1089: [SCOI2003]严格n元树【dp+高精】
设f[i]为深度为i的n元树数目,s为f的前缀和 s[i]=s[i-1]^n+1,就是增加一个根,然后在下面挂n个子树,每个子树都有s[i-1]种 写个高精就行了,好久没写WA了好几次-- #incl ...
- Xposed 集成 Android 6.0.1环境中,总结
由于工作需要,需要将xposed集成到android源码中,生成新的ROM就自带xposed的功能. 下面大体上说一下步骤和遇到的问题. 1.下载,并编译android源码,成功. 2.下载 http ...
- Django中的cookie和session实现
cookie from django.shortcuts import render, HttpResponse, redirect # 此装饰器的作用就是讲所有没有cookie验证的页面都需要验证后 ...
- jenkins软件工具部署
Jenkins服务软件的安装部署 1.我们在linux安装部署Jenkins的时候,因为jenkins是一个java web程序,所以首先要保证linux系统上已经安装配置好java JDK环境,并安 ...
- C plus plus sprintf用法
sprintf int sprintf ( char * str, const char * format, ... ); Write formatted data to string Compose ...