webpack使用
webpack介绍
webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
还可以按需加载的模块进行代码分离，等到实际需要的时候再异步加载。通过loader的转换，任何形式的资源都可以视作模块。比如CommonJS模块,
AMD模块，ES6模块，CSS，图片，JSON，less等
1) webpack安装
npm install webpack -g
2) webpack使用
webpack main.js build.js
会把基于模块开发的main.js引用的外部模块合并到build.js中。页面上直接引用build.js
3）配置文件
webpack.config.js默认的配置文件，将来在命令行运行的webpack就会自动执行配置文件中的内容
module.exports = {
//入口文件
entry: './main.js',
output: {
//打包输出的目录
path: './bin',
filename:'build.js'
}，
module:{
loaders:[{
test:/\.css$/,
exclude:/node_modules/,
loader: 'style-loader !css-loader'//执行顺序从右到左
}
]
}
}
webpack常用的loader
1)初始化项目 npm init
2).1下载style-loader 和css-loader
npm install css-loader style-loader --save-dev
使用如上，
2).2autoprefixer-loader 自动添加css 前缀
npm install autoprefixer-loader -S
使用： loader: 'style-loader !css-loader !autoprefixer-loader'//执行顺序从右到左
2).3 less
npm install less-loader less -S
使用：loader: 'style-loader !css-loader !autoprefixer-loader !less-loaderl'//执行顺序从右到左
2).4 sass
npm install sass-loader node-sass -S
使用：loader: 'style-loader !css-loader !autoprefixer-loader !sass-loaderl'//执行顺序从右到左
2).5 url-loader 依赖file-loader
npm install url-loader -S
说明： 小于80k的文件，把图片进行base64编码，减少一次http请求。
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=80000'
}
如果处理字体图标，eot|svg|ttf|woff|tof等
2).6 ES6转ES5
经常用到的语法，
例如： import, export default,(AMD规范)
mudule.exports （CommonJS规范）
webpack中常用的plugin
1、实时打包和浏览器实时刷新
1）npm install webpack-dev-server -S
2) 使用： webpack-dev-server --inline --hot --open --port 3000
在package.json中配置：
“script”:{
'dev':'webpack-dev-server --inline --hot --open --port 3000'
}
参数说明：
inline 自动刷新
hot 热加载
open 自动在默认浏览器中打开
port 指定端口
指令运行： npm run dev
2、html-webpack-plugin
作用： 在内存中生成index.html,并且自动打包编译的文件
1）npm install html-webpack-plugin -S
2)使用： webpack.config.js中设置
var htmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new htmlWebpackPlugin({
title:'页面标题'，
filename: 'index.html',
template:'index.html'
})
]
