webpack.config.js配置資訊的說明

標籤：load   資訊   自動   orm   port   ade   需要   源碼   test   

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: 頁面中的入口檔案；

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配置資訊的說明