webpack

基本命令http://blog.csdn.net/sinat_17775997/article/details/52434604

webpack      // 最基本的启动webpack的方法
webpack-w  // 提供watch方法；实时进行打包更新
webpack-p   // 对打包后的文件进行压缩
webpack-d   // 提供source map，方便调式代码

全局安装

# npm install webpack -g

项目安装：
# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
# npm install webpack --save-dev

使用ES6

安装babel-loader：# npm install babel-loader --save-dev安装转码规则：# npm install babel-preset-es2015 --save-devES7不同阶段语法提案的转码规则（共有4个阶段），选装一个# npm install --save-dev babel-preset-stage-0# npm install --save-dev babel-preset-stage-1# npm install --save-dev babel-preset-stage-2# npm install --save-dev babel-preset-stage-3参考格式：{test:/\.js$/,loader:'babel?presets[]=es2015,presets[]=stage-0'}

编译css

安装css-loader：# npm install css-loader  --save-dev安装style-loader# npm install style-loader  --save-dev参考格式：{test:/\.css$/,loaders:['style','css','autoprefixer']}

编译less

# npm install less --save-dev安装less-loader：# npm install less-loader --save-dev参考格式：{test:/\.less/,loaders:['style','css','autoprefixer','less'],}

使用autoprefixer自动补上浏览器兼容

# npm install autoprefixer-loader --save-dev参考格式：{test:/\.css$/,loaders:['style','css','autoprefixer']},{test:/\.less/,loaders:['style','css','autoprefixer','less'],}

编译文件

安装file-loader：# npm install file-loader --save-dev参考格式：{test:/\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,loader:'file-loader?name=[hash].[ext]'}

编译图片

# npm install url-loader --save-dev参考格式：{test:/\.(png|jpg)$/,loader:'url?limit=1200&name=[hash].[ext]'}

编译JSX

# npm install jsx-loader --save-dev# npm install babel-preset-react --save-dev参考格式：{test:/\.jsx$/,loaders:['jsx','babel?presets[]=es2015,presets[]=stage-0,presets[]=react']}

示例源码

在项目目录下，新建一个webpack.config.js文件，把下面代码复制进去，然后在新建一个app.js和index.js文件，写上console.log('你好世界');执行命令：webpack然后找到build目录就看到编译后的文件了varwebpack=require('webpack');module.exports={entry:{app:'./app',//编译的入口文件index:'./index',//编译的入口文件},output:{publicPath:'/build/',//服务器根路径path:'./build',//编译到当前目录filename:'[name].js'//编译后的文件名字},module:{loaders:[{test:/\.js$/,loader:'babel?presets=es2015'},{test:/\.css$/,loaders:['style','css','autoprefixer']},{test:/\.less/,loaders:['style','css','autoprefixer','less'],},{test:/\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,loader:'file-loader?name=[hash].[ext]'},{test:/\.(png|jpg)$/,loader:'url?limit=1200&name=[hash].[ext]'//注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片}]},plugins:[newwebpack.optimize.CommonsChunkPlugin('common.js')//将公用模块，打包进common.js],resolve:{extensions:['','.js','.jsx']//后缀名自动补全}};