webpack2版本四個核心概念

webpack 是一個現代的 JavaScript 應用程序的模塊打包器(module bundler) 四個核心概念： ------------------------------------------------------------------------------------------------ 入口(Entry)： webpack 將建立全部應用程序的依賴關係圖表(dependency graph)。圖表的起點被稱之爲入口起點(entry point)。 入口起點告訴 webpack 從哪裏開始，並遵循着依賴關係圖表知道要打包什麼。 能夠將您應用程序的入口起點認爲是根上下文(contextual root)或 app 第一個啓動文件。 在 webpack 中，咱們使用 webpack 配置對象(webpack configuration object) 中的 entry 屬性來定義入口。 單個入口（簡寫）語法 用法：entry: string|Array<string>
webpack.config.js const config = { 　　entry: './path/to/my/entry/file.js' }; module.exports = config; entry 屬性的單個入口語法，是下面的簡寫： const config = { 　　entry: { 　　　　main: './path/to/my/entry/file.js' 　　} }; ------------------------------------------------------------------------------------------------ 出口(Output)： 將全部的資源(assets)歸攏在一塊兒後，咱們還須要告訴 webpack 在哪裏打包咱們的應用程序。 webpack 的 output 屬性描述瞭如何處理歸攏在一塊兒的代碼(bundled code)。 webpack.config.js var path = require('path'); module.exports = { 　　entry: './path/to/my/entry/file.js', 　　output: { 　　　　path: path.resolve(__dirname, 'dist'), 　　　　filename: 'my-first-webpack.bundle.js' 　　} }; ------------------------------------------------------------------------------------------------ 加載器(Loader)： webpack 的目標是，讓 webpack 聚焦於項目中的全部資源(asset)，而瀏覽器不須要關注考慮這些（這並不意味着資源(asset)都必須打包在一塊兒）。 webpack 把每一個文件(.css, .html, .scss, .jpg, etc.) 都做爲模塊處理。並且 webpack 只理解 JavaScript。 webpack loader 會將這些文件轉換爲模塊，而轉換後的文件會被添加到依賴圖表中。 在更高層面，webpack 的配置有兩個目標： 1.識別出(identify)應該被對應的 loader 進行轉換(transform)的那些文件 2.因爲進行過文件轉換，因此可以將被轉換的文件添加到依賴圖表（而且最終添加到 bundle 中）(use 屬性) webpack.config.js var path = require('path'); const config = { 　　entry: './path/to/my/entry/file.js', 　　output: { 　　　　path: path.resolve(__dirname, 'dist'), 　　　　filename: 'my-first-webpack.bundle.js' 　　}, module: { 　　rules: [ 　　　　{test: /\.(js|jsx)$/, use: 'babel-loader'} 　　] 　} }; module.exports = config; ------------------------------------------------------------------------------------------------ 插件(Plugins): 因爲 loader 僅在每一個文件的基礎上執行轉換，而 插件(plugins) 最經常使用於（但不限於）在打包模塊的「compilation」和「chunk」生命週期執行操做和自定義功能（查看更多）。webpack 的插件系統極其強大和可定製化。 因爲你能夠在一個配置屢次使用插件用於不一樣的目的 想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。 多數插件能夠經過選項(option)自定義。 因爲須要在一個配置中，屢次使用一個插件，來針對不一樣的目的，所以你須要使用 new 來建立插件的實例，而且經過實例來調用插件。 webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path'); const config = { 　　entry: './path/to/my/entry/file.js', 　　output: { 　　　　path: path.resolve(__dirname, 'dist'), 　　　　filename: 'my-first-webpack.bundle.js' 　　}, module: { 　　rules: [ 　　　　{test: /\.(js|jsx)$/, use: 'babel-loader'} 　　] }, plugins: [ 　　new webpack.optimize.UglifyJsPlugin(), 　　new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config;