webpack.config.js配置详解

 

第一步：WebpackConfig.js

四个核心概念

入口（entry）                    指示webpack使用哪个模块作为构建其内部依赖图开始，进入起点后依赖项被处理，最后输出到bundles文件中           // 使用CommonsChunkPlugin 多页面创建，相互间共享代码创建bundle，起点增多，可复用入口起点之间的大量代码/模块。                    e.g : module.exports = {                                    entry :  {                                     'common' : ['./src/page/common/index.js'],                                     'index'       : ['./src/page/index/index.js]                                 }                            } 输出（output）            Attention：入口可以有多个，出口只能有一个！                    告诉webpack在哪里输出bundles以及如何命名这些文件。                    e.g : output : {                                path : path.resolve(__dirname, 'dist'),  //目标输出目录path的绝对路径                                //path : __dirname + '/dist'                                 //多个入口或使用了CommonsChunkPlugin时使用上面命令行，用占位符确保每个文件有唯一名称                                filename : 'js/[name].js'                                 //如果输出不确定，可先忽略，在入口处设置：__webpack_public_path__ = myRuntimePublicPath  loader                   让webpack去处理那些非JavaScript文件，webpack本身只理解JavaScript。                   loader里包含两个目标：                          1、test属性 用于标识出应该被对应的loader进行转换的某个或某些文件；                          2、use属性 表示转换时使用哪个loader。                   e.g : module : {                                loaders : [                                   {                                       test : /\.css$/,                                        loader : ExtractTextPlugin.extract("style-loader", "css-loader")                                       //ExtractTextPlugin.extract 待补充                                     }，{                                       test : /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,                                       loader : 'url-loader?limit=100&name=resource/[name].[ext]'                                                  } , {                                      text : /\.string$/,                                      loader : 'html-loader',                                      query : {                                             minimize : true,                                             removeAttributeQuotes : false                                       }                                 }                             ]                         }           //可在内联中import出loader的方法：                   import Styles from 'style-loader!css-loader?modules!./styles.css'; 插件（plugins）                   解决loader无法实现的其他事，功能从打包优化到重新定义环境中的变量，使用一个插件，只需要require（）插件，而后将其添加到plugins数组中。                   在一个配置文件中，因为不同目的多次使用同一个插件时，用new操作符创建一个实例：                          e.g : plugins ; [                                         //通用模块独立到js/base.js里                                         new webpack.optimize.CommonsChunkPlugin({                                                 name : 'common',                                                 filename : 'js/base.js'                                          }),                                        //把css单独打包到文件里                                        new ExtractTextPlugin("css/[name].css"],                                        //html模板处理                                        new HtmlWebpackPlugin(getHtmlConfig('html文件名', '页面头名称'))                                  ] 模式（这里我理解为整个webpack体系从入到出全程的模式）                    通过选择development或production中的一个，来设置mode参数，启用相应模式吓得webpack内置优化。                    module.exports = {                             mode : 'production'                    };

总结Summary