webpack各配置詳解

enrecul101 發布于2019-08-23 11:41 / 2068人閱讀

摘要：配置一些開發環境的提示工具例如當項目中報錯可以準確的定位到哪個文件報錯對比項構建速度重新構建速度代碼提示定位原始源代碼生成后的代碼可根據場景使用這兩個值調試代碼項目中配置引入文件的快捷路徑中導出的對象內配置快捷方式名對應的路

devtool: 配置一些開發環境的提示工具

例如: devtool: "cheap-module-eval-source-map" 當項目中報錯可以準確的定位到哪個文件報錯

對比項	構建速度	重新構建速度	代碼提示定位
cheap-module-eval-source-map	+	++	原始源代碼
eval	+++	+++	webpack生成后的代碼

可根據場景使用這兩個值調試代碼

alias: 項目中配置引入文件的快捷路徑

 webpack.config.js中導出的alias對象內配置   key ——> 快捷方式名   value ——> 對應的路徑
 如要配置web -> page這個文件夾的快捷方式    page: "app/web/page"

dll: 引入一些不會經常更新的第三方庫，只要其包含的庫沒有增減、升級, 線上的dll代碼不會隨著版本發布頻繁更新,不需要重新打包

dll: ["vue", "axios"] 這樣使用即可

loaders: 配置一些項目需要使用自動轉換的語法

例如： typescript: true ==> 項目中可以使用ts

或者：

    scss: {
        options: {
            includePaths: [path.resolve(_dirname, "app/web/asset"), path.resolve(_dirname, "app/web/asset/style")],
        },
      }

可以轉換靜態資源asset下的scss文件

另一種寫法:

    {
        test:/.css$/,
        loader: "style!css"
    }

這里面的!用以webpack處理css文件時使用css-loader兼style-loader
!加了之后文件處理是自右向左，即先使用css-loader然后進行style-loader處理

url-loader可將圖片轉換成base64編碼

plugin: 使用一些插件完成一些功能

例如: CommonsChunkPlugin 提取塊之間共享的公共模塊

performance: 設置一些性能監測

例如: key ——> hints value ——> "warning"
將展示一條警告，通知你這是體積大的資源

webpack中 devServer選項改項目運行端口

    devServer: {
        host: "127.0.0.1",
        port: 3000
    }

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97324.html

庫，組件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架構就是骨架，如下圖所示譯年月個有趣的和庫前端掘金我們創辦的使命是讓你及時的了解開發中最新最酷的趨勢。翻譯 | 上手 Webpack ? 這篇就夠了！ - 掘金譯者：小 boy （滬江前端開發工程師）本文原創，轉載請注明作者及出處。原文地址：https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結構 - ...

tommego 2019-08-20 16:33 評論0 收藏0
webpack多頁應用架構系列（十三）：構建一個簡單的模板布局系統

摘要：原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里前言上文多頁應用架構系列十二利用生成普通網頁頁面模板我們基本上已經搞清楚如何利用來生成普通網頁頁面模板，本文將以我的腳手架項目介紹如何在這基礎上搭建一套簡單的模板布局系統。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000007...

yedf 2019-08-20 11:36 評論0 收藏0
webpack詳解

摘要：但也是最復雜的一個。中當一旦某個返回值結果不為便結束執行列表中的插件中上一個插件執行結果當作下一個插件的入參調用并行執行插件流程篇本文關于的流程講解是基于的。 webpack是現代前端開發中最火的模塊打包工具，只需要通過簡單的配置，便可以完成模塊的加載和打包。那它是怎么做到通過對一些插件的配置，便可以輕松實現對代碼的構建呢？ webpack的配置 const path = requir...

lcodecorex 2019-08-22 15:18 評論0 收藏0
[js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解(上

摘要：接著上文，重新在文件夾下面新建一個項目文件夾，然后用初始化項目的配置文件，然后安裝，然后創建基本的項目文件夾結構，好了，我們的又一個基本項目結構就搭建好了第一開始通過文件配置我們的項目首先在項目文件夾下面，新建一個文件，這個文件可接著上文，重新在webpack文件夾下面新建一個項目文件夾demo2，然后用npm init --yes初始化項目的package.json配置文件，然后安...

moven_j 2019-08-21 16:27 評論0 收藏0