webpack配置文件详解（二）

一、webpack配置文件,文件名为：webpack.config.js 放置到项目根目录下即可

   文件 结构如下：

var webpack = require('webpack');module.exports = {         entry:"./js/index.js",         output:{             path: path.resolve(__dirname, './dist'),              publicPath: '/dist/',             filename:"bundle.js"            },        plugins:[                        //UglifyJsPlugin插件中 warnings:false 打包时可以消除warings报警          new webpack.optimize.UglifyJsPlugin({                         compress:{                         warnings:false                        }             ],       module:{          loaders:[               { test:/\.css$/,                 loaders: ['style-loader', 'css-loader']               }]         },       resolve:{           extensions:['.js','.css']  //自动补全识别后缀       }    }

二、单文件输入，输出配置

  1、在项目根目录下新建js文件夹，创建有两个文件common.js，index.js。内容分别如下：

./js/common.js   module.exports = "hello";./js/index.js  var str = require("./common.js");  console.log(str);

  2、webpack.config.js配置文件中entry,output配置如下： 

var path = require('path')；module.exports = {            entry:"./js/index.js",                        //entry代表入口文件            output:{               path: path.resolve(__dirname, './dist'),   //出口文件路径，打包js放在dist目录下               publicPath: '/dist/',                                       filename:"bundle.js"                       //输出文件名            }                                }

三、多入口，多输出文件配置

var path = require('path')；module.exports = {        entry:{          index:"./js/index.js",          main:"./js/main.js"        },        output:{          path: path.resolve(__dirname, './dist'),          publicPath: '/dist/',              filename:"[name].bundle.js"   //[name] 是一个占位符，类似函数形式参数。实际参数是index与main。                                        //dist目录中生成index.bundle.js和main.bundle.js        }    }

四、在module模块中，配置模块加载器，这里以配置CSS文件模块加载器为例子。
  1、在上面项目中新建：./css/index.css文件，内容如下：   

    body{background:blue;}

  2、修改上列的,index.js入口文件如下:

    var str = require("./common.js");    alert(str);    require("../css/index.css");  //这里不需要 style-loader!css-loader!,我们把加载器配置到webpack.config.js文件里面。     

  3、修改webpack.config配置文件

 module.exports = {      entry:"./js/index.js",       output:{          path: path.resolve(__dirname, './dist'),           publicPath: '/dist/',           filename:"bundle.js"         },        module:{          loaders:[             { test:/\.css$/,loader:'style-loader'},             { test:/\.css$/,loader:'css-loader'}             ]         }      }

五、resolve自动补全，属性extensions数组中配置的文件后缀：
 一、index.js入口文件如下 

require("../css/index");var str = require("./common");alert(str);       

 二、在配置文件添加 resolve 字段.       

module.exports = {        entry:"./js/index.js",        output:{              path: path.resolve(__dirname, './dist'),               publicPath: '/dist/',              filename:"bundle.js"            },        module:{            loaders:[               { test:/\.css$/,                loaders: ['style-loader', 'css-loader']               }]            },        resolve:{                extensions:['.js','.css']           //自动补全识别后缀            }        }

六、webpack-dev-server --hot --inline,webpack热加载自动刷新命令
    第一步：安装 npm install webpack-dev-server -g     
    第二步：写入到package.json依赖  npm install webpack-dev-server --save-dev         

    第三步：修改webpack配置文件

var webpack = require('webpack');module.exports = {         entry:"./js/index.js",         output:{             path: path.resolve(__dirname, './dist'),              publicPath: '/dist/',             filename:"bundle.js"            },        plugins:[                         //UglifyJsPlugin插件中 warnings:false 打包时可以消除warings报警          new webpack.optimize.UglifyJsPlugin({                         compress:{                         warnings:false                        }             ],       module:{          loaders:[               { test:/\.css$/,                  loaders: ['style-loader', 'css-loader']               }]         },       resolve:{           extensions:['.js','.css']  //自动补全识别后缀       }    }

     
    第四步：修改index.xml中引入bundle.js的路径。
      

 <script type="text/javascript" src="../dist/bundle.js"></script>

    第五步：运行如下命令,webpack-dev-server --hot --inline  实现自动刷新。默认端口8080；      
 浏览器输入 http://localhost:8080/index.html 然后修改css就能立即看到反应在网页上了。

七、修改package.json ，创建快捷键命令

  package.json中，scripts字段，可以把一个复杂的命令起一个简单的名字，或者就是快捷键。

输入命令npm run start 代替上面 输入的命令,webpack-dev-server --hot --inline 来实现自动刷新。

    npm run build 代替命令webpack -p 实现打包压缩

   --progress 打印打包日志

    --colors 带颜色的日志