webpack 基礎

第一部分：文檔介紹

webpack 是 JavaScript 應用程序的靜態模塊打包器，它將應用中需要的所有模塊生成有依賴關係的一個或多個 bundle，了解 webpack 需要理解它的四個核心概念，分別是Entry,Output,Loader,Plugin

• Entry是入口，webpack 從這開始構建依賴圖並生成打包文件，單個入口語法：entry: string|Array<string>，多個入口：entry: {[entryChunkName: string]: string|Array<string>}，每個入口生成的依賴文件相互獨立，應用於多頁面的應用程序或單頁面應用程序中分離 app 和第三方庫 (vendor) 入口
• Output是輸出，指示 webpack 如何去輸出、以及在哪裡輸出，配置項：output:{filename:,path:,...}，對於單個入口，filename 是一個靜態名稱，如 filename: "bundle.js"，對於多入口，要保證每個 bundle 有唯一的名稱，可以使用入口名稱如filename: "[name].bundle.js"
• Loader，webpack 自身只理解 JavaScript，loader 可以將其他模塊轉化為 webpack 能夠處理的模塊，用法：module:{rules:[{test:,use:}]}，loader支持鏈式傳遞，一組鏈式的 loader 將按照相反的順序執行
• Plugin比 Loader 的作用更廣泛，用來解決 loader 無法實現的事情，用法：plugins:[]

綜上所述的一個webpack配置

const HtmlWebpackPlugin = require(html-webpack-plugin); // 通過 npm 安裝const webpack = require(webpack); // 用於訪問內置插件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: /.txt$/, use: raw-loader } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: ./src/index.html}) ]};module.exports = config;

此外還有一些其他的配置項

• resolve，設置模塊如何被解析

resolve: { modules: ["app", "node_modules"], aliasFields: ["main"], descriptionFiles: ["package.json"], mainFields: ["main", "browser", "module"], extensions: [".js", ".jsx"], }

其中modules配置告訴 webpack 解析模塊時應該搜索的目錄，aliasFields指定一個規範解析的欄位，descriptionFiles用於描述的 JSON 文件，mainFields指定在 package.json 中使用哪個欄位導入模塊，上述例子中優先從 main 欄位中解析文件，extensions 提供自動解析擴展，這樣在引入模塊時可以不帶擴展

• externals, 外部擴展，此配置可以將那些不需要改動的依賴模塊不打包到 boundle 中，而是在運行是從外部獲取

externals: { "antd": "antd", "react": "React", "react-dom": "ReactDOM", "lodash": "lodash" }

• devtool，webpack 提供了7種 sourceMap 模式可以選擇，方便調試代碼
• target,webpack 的編譯環境，默認為 web，編譯為類瀏覽器可用
• stats,控制顯示包的信息

推薦閱讀：