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 带颜色的日志