web pack是一个前端资源模板管理的打包工具,它可以将css,js,image,vue等文件当做一个模块,自动处理内部的依赖关系,依照指定的规则进行打包,最终将这些资源输出到一个统一的.js文件中,将来在系统中只需要请求这个打包好的js文件即可完成所有的功能
一.特点:
1.loader;
web pack自身自能处理JavaScript类型的文件,如果要处理其他类型的文件,就需要loader(加载器)进行转换.loader可以看成是模块与静态资源的转换器,他自身也是一个函数,接收源文件作为参数,返回转换后的结果
2.plugin
plugin可以完成更多loader不能完成的功能,插件的存在使得webpack非常灵活
二.使用步骤
1.全局安装webpack===>npm install webpack -g
2.在当前项目中安装webpack===>npm install webpack --save
3.利用webpack打包CSS文件
打包css文件需要依赖style-loader/css-loader,利用npm安装.npm install style-loader css-loader --save-dev;在webpack.config.js文件中进行配置的时候,loader:'style-loader!css-loader'.style-loader放在前面,与CSS-loader中间中"!"分隔开
4.利用webpack-dev-server和html-webpack-plugin实现页面刷新和自动打包
(1)html-webpack-plugin这个插件可以自动生成一个index.html文件在内存中,只有个这样web pack-dev-server才能实现实时刷新页面和实时打包
a).安装:npm install html-webpack-plugin --save-dev
b).在webpack.config.js文件中导入 var HtmlWebpackPlugin=require('html-webpack-plugin');
Plugins:[
new HtmlWebpackPlugin({
title:'生成页面的标题'
filename:'index.html'//生成页面的文件名称
template:'index.html'//根据这个模板来生成上面的文件
})
]
c).安装npm install webpack webpack-dev-server --save-dev
d).在package.json中的''scripts'':{
"dev":"webpack-dev-server --inline --hot --port 端口号 --open"
"build":"webpack"
}
e).输入指定npm run dev即可自动打开浏览器,端口号即为你自己配置的端口号
webpack相关参数:
--inline:自动刷新
--hot:热加载和inline配合使用
--port 端口号
--open:自动在浏览器中打开
--host:可以指定服务器的ip,不指定默认为Localhost127.0.0.1
5.将es6语法转换为es5语法
安装的包:npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev
在webpack.config.js文件中进行配置
a).在loader中{
test:/.\.js$/,
loader:'babel'
exclude:/node_modules/==>忽略这个文件的编译
}
b).在babel属性中
babel:{
presets:['es2015'],
plugins:['transform-runtime']
}
