安装：npm install webpack -gnpm install webpack-dev-server -g
webpack 配置文件var path = require(‘path‘);
module.exports = {
entry: path.resolve(__dirname, ‘app/app.js‘),
output: { path: path.resolve(__dirname, ‘build‘), filename: ‘bundle.js‘ }
}
配置 package.json"scripts": { "start": "webpack-dev-server", "build": "webpack" }npm run build 相当于 webpack, npm run start 相当于 webpack-dev-server.安装各种loader
比如babel:
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
webpack配置loader
module.exports = { ... module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: ‘babel‘, query: { presets: [‘es2015‘,‘react‘] } },
...
//"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来。
{ test: /\.css$/, loader: ‘style-loader!css-loader?modules!postcss‘ },
//安装postcss-loader 和 autoprefixer（自动添加前缀的插件）：npm install --save-dev postcss-loader autoprefixer。
??????????? { test: /\.js$/, loader: ‘jsx-loader?harmony‘ },
??????????? { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
??????????? { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘},
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.less$/, exclude: /^node_modules$/, loader: ExtractTextPlugin.extract(‘style‘, [‘css‘, ‘autoprefixer‘, ‘less‘]) }
] },
postcss: [
require(‘autoprefixer‘)//调用autoprefixer插件
],
... };
loaders:[{ test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须） loader:loader的名称（必须） include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选） query:为loaders提供额外的设置选项（可选）}]安装postcss-loader 和 autoprefixer（自动添加前缀的插件）：
npm install --save-dev postcss-loader autoprefixer。
devServer
devServer: { ?????????contentBase: "./public", // 本地服务器所加载的页面所在的目录 ?????????colors: true, // 终端中输出结果为彩色 ?????????historyApiFallback: true, // 不跳转 ?????????inline: true // 实时刷新 ?????} ?plugins
Hot Module Replacement：它允许在修改组件代码后，自动刷新实时预览修改后的效果。① 在webpack配置文件中添加HMR插件；plugins: [ ?????????????????new webpack.HotModuleReplacementPlugin()//热加载插件 ?????????], ?② 在Webpack Dev Server中添加“hot”参数
devServer:{
historyApiFallback:true,
hot:true,
inline:true,
progress:true,//报错无法识别，删除后也能正常刷新
},
HtmlWebpackPlugin：依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）
npm install --save-dev html-webpack-plugin移除生成文件夹，利用此插件，index.html文件会自动生成，此外CSS已经通过前面的操作打包到JS中了。在app目录下，创建一个index.tmpl.html文件模板，这个模板包含title等必须元素，
在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8"> ???<title>Webpack Sample Project</title> ?</head> ?<body> ???<div id=‘app‘> ???</div> ?</body></html>
webpack常用的命令
webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包webpack --watch //监听变动并自动打包webpack -p//压缩混淆脚本，这个非常非常重要！webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb （主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）
webpack安装配置
原文地址：http://www.cnblogs.com/avidya/p/7508069.html