webpack.config.js配置信息的說明

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build/build.js"
  },
  module: {
    loaders: [
       //.css 文件使用 style-loader 和 css-loader 來處理
      { test: /\.css$/, loader: "style!css" },
      //.js 文件使用 jsx-loader 來編譯處理
      { test: /\.js$/,    loader: "jsx-loader" }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: []
};

entry: 頁面中的入口文件，可以是字符串路徑'./src/main.js'，也可以是數組['./a.js','./b.js']，還可以是對象{main: './a.js',home: './b.js'}；

output:頁面通過webpack打包后生成的目標文件放在什么地方去，我這邊是在根目錄下生成build文件夾，該文件夾內有一個build.js文件；

resolve:定義了解析模塊路徑時的配置，常用的就是extensions;可以用來指定模塊的后綴，這樣在引入模塊時就不需要寫后綴，全自動實例；

plugins:定義了需要使用的插件，比如commonsPlugin在打包多個入口文件時會提取公用的部分，生成common.js；

module.loaders:是文件的加載器，比如react需要在頁面中引入jsx的js源碼至頁面上來，然后使用該語法，但是通過webpack打包后就不需要再引入JSXTransformer.js;看到上面的加載器；比如jsx-loader加載器就是代表JSXTransformer.js的，還有style-loader和css-loader加載器；因此在使用之前我們需要通過命令把它引入到項目上來

 

如果設置好了webpack.config.js之后 ，那么就可以在命令行里直播運行webpack命令進行打開；如果配置文件不是叫webpack.config.js，而是叫其他比如：webpack.dev.config.js，那么打開里就要用到--config 來指定配置文件： webpack --config webpack.dev.config.js