Webpack入门指南
一、什么是 webpack？
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、ES6、样式（含less/sass）、图片等都作为模块来使用和处理。
更多webpack学习内容
二、安装
$ npm install webpack-g
三. 配置
创建webpack.config.js它的作用和gulpfile.js一样就是一个配置项，设置 webpack 任务功能。
entry 入口文件 让webpack用哪个文件作为项目的入口
output 出口 让webpack把处理完成的文件放在哪里
module 模块 要用什么不同的模块来处理各种类型的文件
plugins 用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。
resolve 用来设置路径指向
watch 用监听文件有改动后执行打包
module.exports={entry:"",//入口文件output:{//出口path:"",filename:""},module:{//模块loaders:[{test:/\.js$/,loader:""}]},plugins:{},resolve:{},wacth:true}
webpack命令
//直接运行webpack.config.js来打包$ webpack//使用另一份配置文件来打包$ webpack--config XXX.js//监听变动并自动打包$ webpack--watch//压缩混淆脚本$ webpack-p
四.开启服务器自动刷新
安装全局webpack-dev-server模块
//安装$ npm install webpack-dev-server-g//运行$ webpack-dev-server--progress--colors
配置设置webpack.config.js
devServer:{contentBase:"www/",inline:true,port:"3000"}
五.例子说明
1.例子demo01文件
全局安装webpack就可以运行演示例子
2.例子demo02文件
需要引入CommonsChunkPlugin,这个属于webpack内置的一个插件，需要在当前目录安装webpack
作用是：用于提取多个入口文件的公共脚本部分
配置设置webpack.config.js
varwebpack=require('webpack');module.exports={...plugins:[newwebpack.optimize.CommonsChunkPlugin({name:'common',//合并公共模块到指定的JS文件 注意不要.js后缀filename:'js/common.js',//输出的目录chunks:['index','login']//抽取的文件})]}
3.例子demo03文件
打包样式和转换less或sass
//安装出来css模块$ npm installstyle-loader css-loader--save-dev//安装转less模块$ npm install less-loader less--save-dev//安装转sass模块$ npm install sass-loader node-sass--save-dev
配置设置webpack.config.js
varwebpack=require('webpack');module.exports={...module:{// webpack使用loader的方式来处理各种各样的资源，比如说样式文件，我们需要两种loader，css-loader 和 style－loader，css-loader会遍历css文件loaders:[// { test: /\.(css|less)$/, loader: 'style-loader!css-loader!less-loader'},{test:/\.scss$/,loader:'style-loader!css-loader!sass-loader'}]},resolve:{alias:{style:'../module/style.less',//后续直接 require('style') 即可}},watch:true//监听文件一旦改变重新打包}
4.例子demo04文件
加载模块到全局和自动刷新
//安装全局webpack-dev-server模块$ npm install webpack-dev-server-g//启动服务器$ webpack-dev-server--progress--colors
配置设置webpack.config.js
module.exports={...devServer:{inline:true,port:8080}...}