webpack安装配置

安装：
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 （主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）

webpack安装配置

HtmlWebpackPlugin：依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）

HtmlWebpackPlugin：依据一个简单的`index.html`模板，生成一个自动引用你打包后的JS文件的新`index.html`。这在每次生成的js文件名称不同时非常有用（比如添加了`hash`值）