安装： npm install webpack -g npm 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插件；
const HtmlWebpackPlugin = require('html-webpack-plugin');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>
const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new HtmlWebpackPlugin({ template: __dirname + "/app/index.tmpl.html" }), new webpack.optimize.UglifyJsPlugin(),//内置插件 ],
webpack常用的命令
webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包 webpack --watch //监听变动并自动打包 webpack -p//压缩混淆脚本，这个非常非常重要！ webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了 其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb （主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）