webpack基礎用法

yexiaobai 發布于2019-08-19 18:10 / 1976人閱讀

摘要：的用法全在配置中是在環境下運行的，學習之前，請先自行安裝環境含安裝第一步全局安裝第二步建立項目文件夾，如一直回車下去項目目錄本地安裝搭建目錄結構在項目根目錄下的簡單目錄結構如下入口文件安裝時，自動建立

----------webpack的用法全在配置中??！
webpack是在node環境下運行的，學習webpack之前，請先自行安裝node環境（含npm）；

安裝webpack：

第一步：
    npm install -g webpack       //全局安裝
第二步：
    建立項目文件夾，如“demo”
    cd demo
    npm init    //一直回車下去
    npm install webpack --save-dev    //項目目錄本地安裝

搭建目錄結構

在項目根目錄“demo”下的簡單目錄結構如下：
    --app
        --index.js    //入口文件
    --node_modules    //安裝modules時，自動建立
    --tem    //HTML模板文件夾
        --index.html
    --webpack.config.js    //自建，不會自動生成；一般會有開發和發布兩種配置文件
    --package.json    //由npm init時自動建立

webpack簡單配置：

webpack的用法全部都在webpack.config.js中；其他地方不要夾雜webpack配置的內容；

//webpack.config.js寫入以下內容
    //引入內置功能模塊(不需要另行安裝)；
    var path = require("path"); 
    var webpack = require("webpack");
    //引入第三方功能模塊（需要另行安裝）；

//關于第三方模塊的用法，強烈建議直接看文檔；

    var HtmlWebpackPlugin = require("html-webpack-plugin");
    
    //定義常用路徑變量；   
    //返回當前文件（webpack.config.js）所在位置
    var ROOT_PATH = path.resolve(__dirname); 
    var APP_PATH = path.resolve(ROOT_PATH,"app");    //拼接路徑；
    var TEM_PATH = path.resolve(ROOT_PATH,"tem");
    var BUILD_PATH = path.resolve(ROOT_PATH,"build");
    
    module.exports = {
        entry : {
            //入口文件
            app : APP_PATH,
            vendors : ["react","react-dom"]
        },
        output : {
            //產出路徑；
            path : BUILD_PATH,
            filename : "[name].js"    
        },
        module : {
            //一切資源(images/css/js...)皆模塊，一切需要loader解析；
            loaders : [
                {test:/.js?$/,
                    loader:"jsx",
                    exclude:/node_modules/}
            ]
        },
        plugins : [
            //生成HTML文件；
            new HtmlWebpackPlugin({
                title : "Hello world app!",
                template : path.resolve(TEM_PATH,"index.html"),
                filename : "index.html",
                chunks : ["vendors","app"],
                inject : "body",
                // chunksSortMode : "none"
            }),
            new webpack.HotModuleReplacementPlugin()    //保證實時刷新；
        ],
        devServer:{
            //實時刷新，需要inline model和hot:true
            histroyApiFallback : true,
            hot : true,
            inline : true,
            progress : true
        }
    }

注意：webpack分析webpack.config.js中的entry file到其他文件中查找依賴，所有文件被包含在bundle.js中；

webpack給每個module（注意：所有文件都是module，包括通過loaders進來的圖片、css等）一個獨立id；并使所有module在bundle.js中可以通過id訪問；

啟動時，只有entry chunk被執行；

webpack支持CMD和AMD規范，但不要在入口文件中使用AMD規范，會報錯；

Development Server:

//Webpack搭建本地服務器，監聽文件改變，整個頁面實時更新；但是不會輸出結果文件到磁盤，適于生產環境下調試；

//webpack-dev-server調用的腳本文件不是output的文件，而是保存在內存中的文件……目前引用的方法只知道用Html-webpack-plugin自動生成html頁面來引用；

常用配置：

    plugins : [
        //保證實時更新，需要啟用內置的HotModuleReplacementPlugin插件；
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        //server切換到inline model
        histroyApiFallback : true,
        hot : true,
        inline : true,
        progress : true
    }

注意：webpack-dev-server允許內網訪問------設置host 0.0.0.0
//webpack-dev-server是實現頁面整體刷新；

//在package.json文件中配置"script"腳本設置快捷命令方式
//以下命令行參數不要和上邊webpack.config.js中的配置有交集，好像會報錯；
"scripts": {
    "start":"webpack-dev-server --colors --host 0.0.0.0 --port 8080"
  }
  使用命令行模式npm run start運行webpack-dev-server；

使用不同的配置build項目：

    //根據需求綁定不同的配置文件并設置scripts腳本運行方式；
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
    "build": "webpack --progress --colors --config webpack.production.config.js"
  }

本人是初學者，有問題希望大家一起探討，共同進步，謝謝；

實踐是檢驗真理的唯一標準；可以看著入口文件和webpack.config.js，猜測應該出現的結果，然后再執行一下，檢驗一下；
推薦一篇文章：

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

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

學習Vue2.0的建議順序

摘要：官方文檔官方文檔，官方文檔永遠是學習資料的第一步起步扎實的基本功。學習的新特性，理解，建議可以看看阮一峰的教程。的學習曲線會比較長，需要了解到的常用命令，以及和的模塊規范，的也很多，其實更多的是屬于一項后端語言。學習Vue2.0的建議順序注：本文是看過其他關于vue文章之后的想法，歡迎轉載，請注明出處。　 Vue官方文檔：Vue2.0官方文檔，官方文檔永遠是學習資料的第一步起步...

iamyoung001 2019-08-20 14:18 評論0 收藏0
Webpack中hash的用法

摘要：在的配置項中，可能會見到這樣的字符。的情況的可以指定。值是特定于整個構建過程的。。因此，以上兩個值中更推薦的是。中的則和前面的一樣，指定了結果的截取長度。的情況被引用的通過來得到帶的文件。所以，這可能并不是我們想要的。在webpack的配置項中，可能會見到hash這樣的字符。當存在hash配置的時候，webpack的輸出將可以得到形如這樣的文件： page1_bundle_54e8...

蘇丹 2019-08-20 18:09 評論0 收藏0
一起來了解下這些webpack常用插件

摘要：前言對于的配置以及常用模塊大家應該都比較熟悉，本文將說一說的一些常用插件，以及用法。如果在一個前面加了它會被定義為調用?；蛘弑荒K的導出的內容所賦值，以支持命名導出。用于生成的文檔的標題默認為將寫入的文件默認模板的相對或絕對路徑。前言對于webpack的配置以及常用模塊大家應該都比較熟悉，本文將說一說webpack的一些常用插件，以及用法。目錄 1.內置插件名稱參數說明...

makeFoxPlay 2019-08-02 16:15 評論0 收藏0
一起來了解下這些webpack常用插件

摘要：前言對于的配置以及常用模塊大家應該都比較熟悉，本文將說一說的一些常用插件，以及用法。如果在一個前面加了它會被定義為調用?；蛘弑荒K的導出的內容所賦值，以支持命名導出。用于生成的文檔的標題默認為將寫入的文件默認模板的相對或絕對路徑。前言對于webpack的配置以及常用模塊大家應該都比較熟悉，本文將說一說webpack的一些常用插件，以及用法。目錄 1.內置插件名稱參數說明...

gggggggbong 2019-08-30 10:47 評論0 收藏0
webpack搭建多頁面系統（三）理解webpack.config.js的四個核心概念

摘要：關于模板的有好幾種。一次安裝所有的大家可以了解一些的用法把編譯成。安裝參考文檔功能將源文件遷移到指定的目錄，返回新的文件路徑。安裝用法它會將所有的入口中引用的移動到和頁面對應的獨立分離的文件。 webpack是需要自己編寫自己需要的一個配置對象，取決你如何使用webpack,下面指定了所有的可用的配置選項。參考文檔：https://doc.webpack-china.org... we...

鄒強 2019-08-21 18:43 評論0 收藏0