webpack的配置

標籤：git   尾碼   尋找   re模組   配置   包含   頁面   路徑   複用   

使用webpack工具需要配置一個根目錄下的設定檔，檔案名稱預設為webpack.condfig.js，設定檔匯出一個模組對象，包含了webpack工具的相關配置參數，這個模組對象將會以參數形式被引用。

參數 ： entry 

該參數對象指明了入口檔案的配置:

 //頁面入口檔案配置    entry: {        demo : [baseUrl + "demo.js"],    },

 

參數 : output

該參數對象指明了檔案被工具經過打包等操作後的輸出配置，包括輸出的檔案的存放位置和檔案名稱等:

   //檔案輸出配置    output: {        path: ‘src/js‘,        filename: ‘[name].js‘,    },

 

參數 : plugins

該參數對象指明了工具將應用上哪些外掛程式，每個外掛程式都被封裝為一個類，引用時需要new生產，例如：

• webpack/lib/optimize/CommonsChunkPlugin:該外掛程式用於封裝檔案間公用複用的部分，使代碼更合理，簡潔。

• webpack.ProvidePlugin: 該外掛程式用於為了避免重複在每個模組裡重複require我們需要的庫，集中設定這些引用的庫並直接使用在每個模組中。

 //外掛程式項    plugins: [        new CommonsChunkPlugin("common.js"),        new webpack.ProvidePlugin({        $ : "jquery",        }),    ],

 

參數 : module

該參數對象指明了相關載入器配置，載入器非常有用，它保證了工具對現有的前端資源的擴充性，它可以載入並解析各種前端資源，相應的載入器需要npm install安裝。

module: {        //載入器配置        loaders: [            { test: /\.css$/, loader: ‘style-loader!css-loader‘ },            { test: /\.(js|jsx)$/, loader: ‘jsx-loader?harmony‘ },            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=25000‘},            { test: /\.(hbs|html)$/, loader: "handlebars"},        ]    },

 

參數 : resolve

該參數指明了其他基本配置，

  resolve: {        //尋找module的話從這裡開始尋找        root: ‘E:/github/flux-example/src‘, //絕對路徑        //自動擴充檔案尾碼名，意味著我們require模組可以省略不寫尾碼名        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],        //模組別名定義，方便後續直接引用別名，無須多寫長長的地址        alias: {            AppStore : ‘js/stores/AppStores.js‘,//後續直接 require(‘AppStore‘) 即可，            ActionType : ‘js/actions/ActionType.js‘,            AppAction : ‘js/actions/AppAction.js‘        }    }

 

全部代碼：

var webpack = require(‘webpack‘);var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");var baseUrl = "./src/dev/pactions/";module.exports = {    //頁面入口檔案配置    entry: {        demo : [baseUrl + "demo.js"],    },    //檔案輸出配置    output: {        path: ‘src/js‘,        filename: ‘[name].js‘,    },    //外掛程式項    plugins: [        new CommonsChunkPlugin("common.js"),        new webpack.ProvidePlugin({        $ : "jquery",        }),    ],    module: {        //載入器配置        loaders: [            { test: /\.css$/, loader: ‘style-loader!css-loader‘ },            { test: /\.js$/, loader: ‘jsx-loader?harmony‘ },            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=4096‘},            {test: require.resolve(‘jquery‘), loader: ‘expose-loader?$‘},        ]    },    //其它解決方案配置    resolve: {        root:‘G:/baseNode/baseNd/baseNd/views‘, //絕對路徑        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],        alias: {            AppStore : ‘js/stores/AppStores.js‘,            ActionType : ‘js/actions/ActionType.js‘,            AppAction : ‘js/actions/AppAction.js‘        }    }};

 

webpack的配置