先來看看官網對webpack的介紹 :javascript
本質上, webpack是一個現代 JavaScript 應用程序的 靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個 依賴關係圖(dependency graph),其中包含應用程序須要的每一個模塊,而後將全部這些模塊打包成一個或多個 bundle。
簡單來講webpack就是一個JavaScript的打包器,將各類模塊(module)打包成資源文件;還能夠經過 Code Spliting 來把代碼分離到不一樣的 bundle 中,而後能夠按需加載或並行加載這些文件;webpack 可使用 loader 來預處理文件,這容許你打包除了JavaScript 以外的任何靜態資源。css
官網首頁很清晰的展現了webpack的主要功能:html
咱們能夠看到,一堆 modules 通過 webpack 打包處理成了各類靜態資源。這就是 webpackjava
在開始學習 webpack 以前,你須要瞭解 webpack 的四個核心概念: node
入口指示 webpack 應該使用哪一個模塊,來開始構建其內部依賴。進入入口後,webpack 會找出有哪些模塊和庫是與入口相依賴的。webpack
咱們能夠在webpack配置中配置entry屬性,來設置一個或多個入口起點。如下是一個簡單的entry配置:web
const config = { entry: { main: 'path/to/your/entry/index.js' } } module.exports = config
設置output是爲了告訴webpack要在哪裏輸出其建立的bundle,而且能夠對bundle命名。示例:正則表達式
const path = require('path') const config = { entry: { main: 'path/to/your/entry/index.js' }, output: { filename:'[name].bundle.js', path: path.join(__dirname,'./dist') } } module.exports = config
咱們經過 output.filename 來設置輸出bundle的文件名, output.path 來設置 bundle 的輸出路徑 npm
>path 是 nodeJs 中的核心模塊,用來處理項目中的路徑。數組
因爲 webpack 只認識 JavaScript 代碼,所以就須要藉助其餘方法來處理那些非 JavaScript 文件,如 css、image、font等。而 loader 能夠將全部類型的文件處理成 webpack 可以識別的有效模塊,而後再對其進行處理。
const path = require('path') const config = { entry: { main: 'path/to/your/entry/index.js' }, output: { filename: '[name].bundle.js', path: path.join(__dirname, './dist') }, module: { loaders: [ { test: /\.ejs$/, use: ['ejs-loader'] } ] } } module.exports = config
以上示例中loader的配置至關於告訴webpack在遇到 .ejs 的文件時,在打包以前先用 ejs-loader 裝換一下。
loader 被用於轉換某些類型的模塊,而插件則能夠用於執行範圍更廣的任務。想要使用一個插件,你只須要require()它,而後把它添加到plugins數組中。多數插件能夠經過選項(option)自定義。
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') // 經過 npm 安裝 const config = { entry: { main: 'path/to/your/entry/index.js' }, output: { filename: '[name].bundle.js', path: path.join(__dirname, './dist') }, module: { loaders: [ { test: /\.ejs$/, use: ['ejs-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ title: 'webpack demo', template: path.join(__dirname, './index.html') }) ] } module.exports = config
HtmlWebpackPlugin 將爲你生成一個 HTML5 文件, 其中包括使用script標籤的 body 中的全部 webpack 包,webpack 提供提供了許多功能強大的插件,查閱插件列表獲取更多插件的使用方法。