Webpack:構建工具?

介紹

　　本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需　要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。?

　　1.自帶模塊化(commonjs規範)?

　　2.編譯：es6 -> es5 , jsx -> es5 , ts(typescript) -> js // 語法糖?

　　3.gulp所做的事情，webpack都可以做到?

　　4.自帶服務器，服務器也是基於Node（webpack-dev-server）?

　　5.那些環境經常使用到webpack：react 、 vue?

　　6.webpack版本：1.x 、2.x 、3.x 、4.x版本?

　　7.中文文檔參考：https://www.webpackjs.com/concepts

使用

1.安裝(在系統命令行(win+R，鍵入cmd在對應目錄下shift+右鍵打開power shell))

　　　　npm install -g webpack

　　　　npm install -g webpack-cli

2.創建項目，初始化package.json文件(在項目根目錄命令行執行)

　　　　npm init

3.安裝項目依賴的webpack(在項目根目錄命令行安裝)

　　　　npm install --save-dev webpack

　　　　npm install --save-dev webpack-cli

4.項目根目錄創建兩個文件夾src和dist

　　　　src:源碼文件

　　　　dist:打包之後的文件

5.編寫代碼

　　　　在src文件創建app.js

　　　　代碼:document.write("Hello Webpack");

6.在項目根目錄創建配置文件webpack.config.js

　　　　輸入代碼:

　　　　項目根目錄命令行執行：webpack,會有警告加上mode模式就沒了(第8點)

　　　　在dist下面創建index.html，引用bundle.js即可看到效果,需在body裏引用, 否則編寫模塊化代碼會報錯.

7.編寫模塊化代碼

　　　　app.js:

　　　　　var hello = require("./hello.js");
        document.getElementsByTagName("body")    [0].appendChild(hello());

　　　　hello.js:

 　　　　module.exports = function(){
            var divs = document.createElement("div");
            divs.textContent = "文本信息"; // innerHTMl
            return divs;
        }

　　　　項目根目錄命令行執行：webpack

8.mode模式(在webpack.config.js文件中加)

　　　　mode: ‘production‘

　　　　mode: ‘development‘

　　　　代碼:

　　　　　　　　const path = require(‘path‘);
            　　　　module.exports = {
                        entry:"./src/app.js",
                        mode: ‘production‘,
                    output:{
                                 path: path.resolve(__dirname,‘dist‘),
                                 path: path.resolve(__dirname,‘dist‘),
                          }
                 }

9.快捷配置,在package.json文件中配置

 "scripts": {
        "build":"webpack",//build是生產模式先用webpack代替在第11點講
        "start":"webpack"//start是開發模式先用webpack代替在第11點講
    }

　　　　項目根目錄命令行改變運行方案：

　　　　　　　　npm run build

　　　　　　　　npm start

10.錯誤調試信息

　　　　擇一種 source map 格式來增強調試過程。不同的值會明顯影響到構建(build)和重新構建(rebuild)的速度。

　　　　生成錯誤信息文件

　　　　配置webpack.config.js文件

　　　　添加devtool:"eval-source-map"

　　　　devtool:

　　　　eval

　　　　source-map

　　　　hidden-source-map

　　　　inline-source-map

　　　　eval-source-map

　　　　cheap-source-map

　　　　cheap-module-source-map

11.webpack服務器

　　　　1.全局安裝(在系統命令行)

　　　　　　npm install -g webpack-dev-server

　　　　2.項目依賴安裝(在項目根目錄命令行)

　　　　　　npm install -D webpack-dev-server

　　　　3.運行webpack服務器

　　　　　　在項目根目錄命令行輸入webpack-dev-server

　　　　　　退出webpack服務器 ctrl+c

　　　　4.快捷執行方案(打開package.json)

 　　　　"scripts": {
            "build": "webpack",
            "start": "webpack-dev-server"
        }

　　　　　　在項目根目錄命令行輸入npm start 就可以快速運行webpack服務器,

　　　　　　webpack服務器後要在瀏覽器輸入localhost:8080

　　　　5.修改服務器配置(詳情看官網 文檔中配置裏的開發中)

　　　　在webpack.config.js配置文件中配置：

　　　　devServer:{

　　　　　　contentBase: path.join(__dirname, "dist"),//把dist作為服務器的根路徑

　　　　　　port: 8081//修改端口

　　　　}

const path = require(‘path‘);
module.exports = {
    devtool:"eval-source-map",
    entry:"./src/app.js",
    mode: ‘production‘,
    output:{
        path: path.resolve(__dirname,‘dist‘),
        filename:"bundle.js"
    },
    devServer:{
        contentBase: path.join(__dirname, "dist"),
        host: "0.0.0.0",
        port: 8081
    }
}

　　　　在項目根目錄命令行輸入npm start 運行

　　　　命令行配置:在package.json文件中配置：

　　　　"webpack-dev-server --progress"//添加進度條

　　　　　"scripts": {
    　　　　"build": "webpack",
   　　　　 "start": "webpack-dev-server --progress"
 　　　　 }

Webpack 構建工具手把手教你怎麽用