webpack的学习
webpack是什么?
1:加载模块(将JS、sass/less、图片等作为模块来处理使用) 2:进行打包
webpack的优势?
1:webpack以commonJS(JS的规范)的形式写脚本
2:模块化(JS、css、图片等)
3:开发便捷(进行打包、压缩、图片转base64等)
4:扩展性强,插件机制完善
webpack安装:
1:npm方式安装:npm install webpack (若是想将项目依赖写入package.json中,依次执行npm init 和npm install webpack --save--dev,就会在init创建的package.json中看到依赖的模块)
2:npm info webpack //查看webpack的信息
若是需要使用webpack工具,需要下载server:npm install webpack-dev-server --save-dev
webpack小例子:
1、创建index.html如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack学习</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
2、创建入口的JS:entry.js
document.write('It works.')
3、输入打包命令:webpack entry.js bundle.js
4、浏览器打开index.html(会显示:It works.),此时bundle.js也被打包创建成功
5、测试多个JS,创建module.js 和module1.js:
module.js: module.exports = 'It works from module.js.'
module1.js: module.exports = 'My name is webpack!'
修改入口entry.js:
document.write('It works.')
document.write(require('./module1.js'))
document.write(require('./module.js'))
再次执行打包命令:webpack entry.js bundle.js
浏览器打开index.html就会显示:It works.My name is webpack!It works from module.js.
若是修改入口entry.js:
document.write(require('./module1.js'))
document.write(require('./module.js'))
document.write('It works.')
执行打包命令后就会显示:My name is webpack!It works from module.js.It works.
小结:webpack会分析入口文件entry.js,解析包含依赖关系的各个文件,这些文件都会打包到html引入的JS(bundle.js)中。
webpack会给每个模块分配一个唯一的ID,通过这个ID索引访问模块。页面启动的时候,会先执行入口文件entry.js代码的顺序依次加载。
webpack-----loader(各种模块css、图片的处理)
webpack本身只能处理JS模块,若是需要处理其他类型的文件(css、图片之类的),需要用到关键字loader
loader需要通过npm命令安装:npm install css-loader style-loader//css的loader安装
loader可以作为模块和资源之间的转换器,是管道式处理方式,不管最初和中间的形式,
最后返回的必须是javascript,因为是在node环境中执行的。loader是一个函数,接收源文件作为参数,返回转换的结果。
就可以用require来加载任何类型的模块、文件。
需要注意的是在entry.js中引入需要这么写:require("!style!css!./style.css") 执行命令:webpack entry.js bundle.js
require CSS 文件的时候都要写 loader 前缀(!style!css!),也可以这样写:require("./style.css") 执行命令:webpack entry.js bundle.js --module-bind "css=style!css"
webpack 操作除了在命令行操作,还可以通过配置文件来操作。
在工作区间新建一个webpack.config.js,webpack说简单点就是一个配置文件,主要分为三个模块。
entry:入口文件 webpack用哪个文件作为入口(本例子中用的是entry.js)
output:出口文件 webpack处理完成的文件放在哪里(本例子中是bundle.js)
module:模块 要用各种不同的模板来处理各种类型的文件(本例子中用的是css)
loaders中test里面包含一个正则,包含需要匹配的文件
loaders是一个数组,包含要处理这些程序的loaders,这里我们用了css和style,注意loaders的处理顺序是从右到左的
先运行css-loader然后是style-loade
如下:
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.css$/,
loader: ['style','css']
}
]
},
//还可以在配置文件中添加很多插件的配置,可以是webpack内置的插件也可以通过npm下载的插件。webpack内置插件的配置
plugins: [
new webpack.BannerPlugin('This file is created by qinbb')//在输出文件bundle.js中首行代码就是这句话
]
}
loader 功能
loader 管道:在同一种类型的源文件上,可以同时执行多个 loader , loader 的执行方式可以类似管道的方式,管道执行的方式是从右到左的方式loader 可以支持同步和异步
loader 可以接收配置参数
loader 可以通过正则表达式或者文件后缀指定特定类型的源文件
插件可以提供给 loader 更多功能
loader 除了做文件转换以外,还可以创建额外的文件
webpack 一些命令:
webpack --progress --colors //环境运行 包括 进度 颜色
webpack --progress --colors --watch//开启监听模式,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译
webpack-dev-server --progress --colors //需要在全局和工作项目中都下载该包
webpack --display-error-details//方便出错时能查阅更详尽的信息
$ webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包
$ webpack --watch //监听变动并自动打包
$ webpack -p //压缩混淆脚本,这个非常非常重要!
$ webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了
//开启webpack-dev-server服务,http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
实时监听是有条件的:
1、所有的文件在同一个目录下
2、简单css可以,但是css预编译器sass就做不到实时监控
webpack --display-error-details//打印错误日志