模块化管理工具兼打包工具 webpack
webpack
是一个【模块化管理工具】兼【打包工具】
是一个工具(和seajs,requirejs管理前端模块的方式是不一样)
在webpack一个文件就是一个模块!
seajs,requirejs
- 模块化!
webpack也能对前端资源进行模块化管理!
- 不是某个要在页面引入的js文件
- 是一个工具
- webpack允许我们在前端代码像node代码一样去引入一个包(文件)
- webpack会把我们写的类似node的模块化方式，做转换，使其他能够以浏览器中运行
- module.exports = '小明' // xx.js
- require('./xx.js') // a.js
安装webpack
npm install -g webpack- 带-g参数表示全局安装!
通过webpack来管理我们的代码，那么我们的代码一般是不会暴露到全局的!
基本使用
- 我们在前端代码像使用node代码一样用module.exports及require来管理(描述)模块的依赖关系,
但是这样的代码是不能直接在浏览器中运行的
var myjack = require('./jack.js')
var myrose = require('./rose.js')
console.log(myjack.money)
- 我们需要使用webapck来管理(转换)我们的代码,使其符合浏览器的规则!
webpack <入口文件名> <输出文件名>- webpack会把我们在代码所依赖的文件(通过require获取的文件)合并到一起!
- 并且【不会产生全局变量】(除非显示的通过window点一个属性)
通过配置文件的方式使用webpack
- 在项目目录添加:
webpack.config.js文件 - 在文件中添加以下内容
// 这是webpack的配置文件
// 每次修改完或着新增，都要重新编译，敲得代码太长，所以模块化一下
// 要求在这个文件中暴露一个对象，按照node 的请求去写就行啦
module.exports = {
// 这个属性表明，整个项目的入口文件是谁
entry:'./src/app.js',
// 这个属性表示，我们项目通过webpack打包后的输出文件及输出路径
output:{
filename:'./dist/bundle.js' // 指定输出的文件名
}
}
- 直接在当前目录的命令行，执行命令：
webpack就可以了!
将css也合并到js代码中
css-loader 和 style-loader
- css-loader,把css合并到js中(没有添加dom操作，也就是没把css添加到页面中)
+
npm install css-loader --save-dev - style-loader,把css-loader处理的结果添加到页面(dom)中
+
npm install style-loader@0.13.1 --save-dev+注意：这里的命令一定要指定版本号，否则出错
output:{
filename:'./dist/bundle.js' // 指定输出的文件名
},
module:{
loaders:[ // Loaders是提供了一些特定的功能
{
// 表明我们(用到的loader)要处理的文件是什么
test:/\.css$/, // 要把指定的css加入到js中
// loader属性指定具体的loader,这个loader其实是一个npm外
// css-loader就是一个npm 包！
// `npm install css-loader --save-dev`
// css-loader只是把css代码加入到js代码（并没把样式添加到dom中）
// style-loader 这个loader这为了把css-loader得到css样式添加到dom中
//
// webpack会先调用!右边的包来处理我们的文件，然后把!右边处理的结果交给左边的包来处理!
loader:'style-loader!css-loader'
}
]
}
less-loader
- 作用: 这个loader会读取匹配的less文件，然后把less文件内容转换为css内容
一般会配合css-loader 和 style-loader一起使用!
- 注意，下载less-loader会缺少一个less包：
npm install less --save-dev，这个需要另外单独安装!
require('./xxx.less') // 用到的less文件要引入才能生效！
module.exports = {
entry: './src/app.js',
output:{
filename:'./dist/bundle.js'
},
module:{
loaders:[
{
test: /\.less$/ ,// 匹配当前loader要处理的文件
// less-loader作用:是读取test规则对应的文件，然后把读取到的less文件内容转换为css内容
loader:'style-loader!css-loader!less-loader'
}
]
}
}
sass-loader
- 安装:
npm install sass-loader --save - 作用： 这个loader会读取匹配的scss文件，然后把less文件内容转换为css内容
- 注意,sass-loader的依赖包node-sass和webpack不会自动安装上
需要手动安装:
npm install node-sass webpack --save-dev
url-loader
- 作用: 是能css中使用的图片进行处理，如果图片比指定的条件小，就转换为base64
如果比指定的条件大就不转换
- 注意，安装时会缺少一个file-loader包:
npm install file-loader --save-dev- 这个file-loader里会对文件操作!
- css: bg:url()
- 在css中有好小图标,可能有100个，浏览器会再发100个请求!
- 如果能够把这个100个请求合成1个，或者0个就更好了!
- 注意：只能够处理css的图片，为什么要处理css的图片呢，因为css图片更多的时候是图标，而html中
直接写一个img的话，一般图片是比较大的，不需要转换为base64，转换的话反而得不偿失，如果是html
图片的话，我们用的是懒加载来解决问题
// base64
module.exports = {
// 指定入口文件
entry:'./src/app.js',
output:{
path:'dist',// path指定父目录，webpack会把path与filename拼接成一个路径
// 同时是指定默认文件的生成目录
filename:'bundle.js'
},
module:{
loaders:[
// 这里要分开写，写两个loader,因为他们用法不一样，一个用来css语法转换，
// 一个用来css里面的图片转换
{
test: /\.css$/,
loader:'style-loader!css-loader',// 从右往左执行!
},
{
test:/\.(jpg|jpeg)/,
// 这里的./是相对于path属性指定的目录
// name参数指定如果不生成base64时，文件的输出目录及输出的文件
// [name]表示原文件名,[ext]表示源文件扩展名
// 如果不指定name参数，输入的图片名是随机的
// limit: 限制转换的大小
// 值的单位是字节,byte
// 1byte = 8bit (位) 字节
// 1kb = 1024 字节
// 1M = 1024kb
// 1000
loader:'url-loader?limit=12048&name=./img/[name].[ext]'
}
]
}
}
babel-loader
babel-loader依赖于babel这个工具!，是在webpack中使用的,可以进行多种语法转换!
- babel是独立的一款工具，可以用来进行多种语法转换，
- 补充：在浏览器直接引入
Browser.js也可以进行语法转换，但是转换性能比较 低一些
写代码时，用es6，在写完之后，再用工具转换为es5（为什么要写es6呢，因为我想体验es6的简洁写法，
那为什么又要转换为es5呢，因为浏览器的兼容性问题）
安装
npm install babel-loader --save-dev*注意：安装时还需要安装babel-core，:
npm install babel-core@6.0.0 webpack --save-dev* 你也可以根据提示，看看提示你缺什么，你就安装什么具体版本号，看提示
如果是对es6进行请求转换，还需要安装:
npm install babel-preset-es2015 --save-dev
// 最终这个配置文件 是由node去解析
const path = require('path') //需要引入path模块
const webpack = require('webpack')
module.exports = {
// 入口文件目录
// 因为我们要分开打包，所以不止一个入口
entry:{
// 在这里写路径的时候推荐把绝对路径也写上，把路径完整地写上来
// 在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径
app:path.join(__dirname, 'src/app.js'),
// 随便写一个属性，值为数组，数组中的元素是我们希望单独打包的第三方包的名字
vender001:['angular']
},
// 输入路径
output:{
// 输出的文件目录
path: path.join(__dirname, 'dist'),
// 输出的文件名(也就是打包后的文件)
filename:'bundle.js'
},
module:{
// 这里是我们webpack打包用到的loaders
loaders:[
{
test:/\.js$/,
// 也需要一些参数，babel不仅仅是能转换es6，还能将react的语法转换成js，
// 所以我们要通过query这个属性来指定一下转化为那种
loader:'babel-loader',
query:{
// 这个es2015也是对应了一个npm 包
// npm install babel-preset-es2015 --save-dev
presets:['es2015'] //这个presets是babel里面的一个属性
}
}
]
}
}
对第三方包进行分离
- 这个分离不是必须的
- 把我们项目用到的包(如果有第三方包，我们分打包合并!)
- 一个可以利用浏览器缓存对第三方包进行缓存!
- 其实就是我们自己写的文件打一个包，其他第三方我文件打一个包!
// 入口文件目录
entry:{
app:path.join(__dirname, 'src/app.js'),
// 随便写一个属性，值为数组，数据中的元素是我们希望单独打包的第三方包的名字
vender001:['angular']
},
// 输入路径
output:{
// 输出的文件目录
path: path.join(__dirname, 'dist'),
// 输出的文件名(也就是打包后的文件)
filename:'bundle.js'
},
// 这个属性里写上webpack中要使用到的插件
plugins:[
// 要使用webpack自的插件来分离第三方包
new webpack.optimize.CommonsChunkPlugin(
// 第一个参数，就是我们在entry写的一个属性名
// webpack会自动读取对应的值，找到相应的包
'vender001',
// 第二个参数，是第三方包单独打包后生成的文件名
'vender.js'
)
]
webpack 插件
自动打开浏览器插件(open-browser-webpack-plugin)
创建index.html插件(html-webpack-plugin)
// npm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html' // 指定模板,最终生成的html会生成到path属性对应的位置
})
]
删除目录插件(clean-webpack-plugin)
拷贝文件插件(copy-webpack-plugin)
webpack 相关参数
- --watch,自动监视文件，重新打包
- --progress 在打包进可以看到进度
- -p 压缩js代码
- -d 生成js代码对应的.map文件(
当我们打调试工具时，浏览器会自动请求与压缩的js文件同级目录的js文件名.map文件
这个文件中的内容表示我们的代码是如何压缩的!)
- -d 生成js代码对应的.map文件(
- 上一篇 »webpack务虚扫盲
- 下一篇 »前端工具的使用-----webpack打包
