摘要：前言隨我來去看看為時(shí)未晚第一版較淺顯的知識(shí)懂得可忽略本文方向安裝起步搭建運(yùn)行粗略代過對(duì)于資源的管理對(duì)于輸出的管理舉例介紹本地開發(fā)基礎(chǔ)服務(wù)熱更新模塊熱替換初步認(rèn)識(shí)初步構(gòu)建新建一個(gè)文件并進(jìn)入更目錄是命令初始一個(gè)文件表示跳過詢問步驟安裝

隨我來,去看看webpack!(為時(shí)未晚)============》第一版(較淺顯的知識(shí),懂得可忽略本文)

安裝,起步搭建運(yùn)行. (粗略代過)

對(duì)于資源的管理,對(duì)于輸出的管理. (舉例介紹)

本地開發(fā) (基礎(chǔ)服務(wù))

熱更新=[模塊熱替換] (初步認(rèn)識(shí))

mkdir webpack_demo && cd webpack_demo   // 新建一個(gè)文件 并進(jìn)入更目錄 `mkdir 是linux命令`
npm init -y   // 初始一個(gè)packjage.json文件  -y 表示跳過詢問步驟...


//安裝webpack
npm install webpack --save-dev  // 添加webpack-cli依賴到"devDependencies"
//webpack4.0+ 需要安裝webpack-cli
 npm install webpack-cli --save-dev  // 添加webpack-cli依賴到"devDependencies"  
 

//生成如下目錄
├── package.json                                       
├── src                                       //源目錄(輸入目錄)
│?? ├── index.js                                    
├── dist                                         // 輸出目錄
│?? ├── index.html                              

// 修改 `dist/index.html`
< !DOCTYPE html>

    
        
        
    
    
               //為什么是main.js下面會(huì)解釋
    


//修改`src/index.js    `
 function component() {
   var element = document.createElement("div");
     element.innerHTML = "整一個(gè)盒子"
     return element;
  }

  document.body.appendChild(component());

 npx webpack (Node 8.2+ 版本提供的 npx 命令) 
node node_modules/.bin/webpack (8.2-版本)

會(huì)將我們的腳本作為入口起點(diǎn)，然后 輸出 為 main.js.

打開dist/index.html  你將會(huì)看到 整一個(gè)盒子 幾個(gè)字樣~

//生成如下目錄
  ├── package.json 
+ |── webpack.config.js                          //webpack配置文件                                     
  ├── src                                        //源目錄(輸入目錄)
  │?? ├── index.js                                    
  ├── dist                                       // 輸出目錄
  │?? ├── index.html                              

先介紹一個(gè)Lodash庫  它是一個(gè)一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫 模塊化處理非常適合值操作和檢測(說白了就是webpack用了我也試試...) 
lodash相關(guān)文檔
npm install lodash --save  //非僅在開發(fā)的時(shí)候使用的依賴 就是需要打包到生產(chǎn)環(huán)境的包 不加-dev

// src/index.js
import _ from "lodash";

function component() {
   var element = document.createElement("div");
     element.innerHTML = _.join(["lodash","webpack"],"");   //join將 array 中的所有元素轉(zhuǎn)換為由""分隔的字符串 其它函數(shù)可以自己實(shí)踐
     return element;
 }

打開index頁面輸出 loadshwebpack

//webpack.config.js
 const path = require("path");
 
 module.exports = {
      entry: "./src/index.js",   //入口
      output: {  //出口
        filename: "main.js", //打包之后腳本文件名稱
        path: path.resolve(__dirname, "dist")  //路徑指向執(zhí)行 js 文件的絕對(duì)路徑 此處為/dist
      }
 };

執(zhí)行npx webpack --config webpack.config.js    (把之前dist目錄下main.js刪除)  新的腳本生成(其實(shí)沒多大變化..)

//  配置一下package.json
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"     //添加此行命令 下次執(zhí)行打包就是 npm  run  build 相當(dāng)于上面的npx webpack --config webpack.config.js
  },

// 資源的配置 css 圖片 js等等.. 舉例 css 圖片

npm install --save-dev style-loader css-loader   css的loader
npm install --save-dev file-loader  file(圖片)對(duì)象的 loader

 //生成如下目錄
   ├── package.json 
 + |── webpack.config.js                          //webpack配置文件                                     
   ├── src                                        //源目錄(輸入目錄)
   │?? ├── index.js   
 + │?? ├── index.css 
 + │?? ├── icon.jpg                                
   ├── dist                                       // 輸出目錄
   │?? ├── index.html                              

//修改webpack.config.js
    const path = require("path");  //path路徑模塊
    module.exports = {
      entry: "./src/index.js",   //入口
      output: {   //出口
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
      },
      module: {
         rules: [
           {
             test: /.css$/,  //檢測正則匹配.css結(jié)尾的文件
             use: [           //使用倆個(gè)loader
               "style-loader", 
               "css-loader"
             ]
           },
           {
             test: /.(png|svg|jpg|gif)$/,  //正則匹配.png svg jpg gif結(jié)尾的文件
             use: [    //使用file-loader
               "file-loader"
             ]
           }
         ]
       }
    };
 //修改src/index.css
    div{
        color:red;
    }

 //修改src/index.js
     import _ from "lodash";
     import "./index.css";
     import Icon from "./icon.jpg";
    
    
      function component() {
        var element = document.createElement("div");
    
        element.innerHTML = _.join(["loadsh", "webpack"], " ");
        var myIcon = new Image();
        myIcon.src = Icon;
    
        element.appendChild(myIcon);
        return element;
      }
    
      document.body.appendChild(component());

npm run build(刪除之前的dist目錄下main.js)  你會(huì)看紅字和圖片  以上就是資源管理的簡短介紹

npm install --save-dev html-webpack-plugin   安裝html-webpack-plugin模塊 模塊用到功能:
  1： 動(dòng)態(tài)添加每次compile后 js css 的hash
  2:  可配置多頁面 單頁面 這些 
  3： 其它沒涉及到
npm install clean-webpack-plugin --save-dev 清除dist文件夾(每次刪除麻煩了..)配置一下

//修改目錄
  ├── package.json 
  |── webpack.config.js                          //webpack配置文件                                     
  ├── src                                        //源目錄(輸入目錄)
 +  │?? ├── app.js
 +  │?? ├── print.js
  │?? ├── index.css 
  │?? ├── icon.jpg                                   
  ├── dist                                       // 輸出目錄
  │?? ├── index.html                              

//webpack.config.js  ===============================================
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/index.js",
    print: "./src/print.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
       new CleanWebpackPlugin(["dist"]),
     new HtmlWebpackPlugin({
       title: "webpack_demo"
     })
  ],
  module: {
     rules: [
       {
         test: /.css$/,
         use: [
           "style-loader",
           "css-loader"
         ]
       },
       {
         test: /.(png|svg|jpg|gif)$/,
         use: [
           "file-loader"
         ]
       }
     ]
   }
};

//修改src/index.js ===================================================
 import _ from "lodash";   //引入lodash模塊
 import "./index.css";     // index.css
 import Icon from "./icon.jpg";   // 圖片
 import printMe from "./print.js"    // printJS


  function component() {
    var element = document.createElement("div");  //創(chuàng)建一個(gè)元素

    element.innerHTML = _.join(["loadsh", "webpack"], " ");  // lodash中_.join方法
    var myIcon = new Image(); //創(chuàng)建一個(gè)圖片
    myIcon.src = Icon;    //src賦值

    element.appendChild(myIcon);   //追加圖片

    var btn = document.createElement("button");  //創(chuàng)建按鈕
    btn.innerHTML = "Click me and check the console!";   //內(nèi)容賦值
    btn.onclick = printMe;   //添加事件
    element.appendChild(btn);   //追加元素

    return element;
  }

  document.body.appendChild(component());   //追加元素到body中
  
  //修改src/print.js  ==========================================
  export default function printMe() {
      console.log("from print.js");
  }
  

npm run build 會(huì)發(fā)現(xiàn)基本webpack的配置之后 ,有點(diǎn)模樣(意思)了  打開頁面index.html正常訪問

npm install --save-dev webpack-dev-server     "webpack-dev-server" 為你提供了一個(gè)簡單的 web 服務(wù)器，并且能夠?qū)崟r(shí)重新加載

 //修改webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
     contentBase: "./dist"
  },
  plugins: [
       new CleanWebpackPlugin(["dist"]),
     new HtmlWebpackPlugin({
       title: "webpack_demo"
     })
  ],
  module: {
     rules: [
       {
         test: /.css$/,
         use: [
           "style-loader",
           "css-loader"
         ]
       },
       {
         test: /.(png|svg|jpg|gif)$/,
         use: [
           "file-loader"
         ]
       }
     ]
   }
};
//修改package.json
...
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --open", //start命令
    "build": "webpack"
 },
 ...
 

npm run start 本地起了8080端口的服務(wù),你也可以看到自己的頁面

//修改webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
     contentBase: "./dist",
     hot: true
  },
  plugins: [
       new CleanWebpackPlugin(["dist"]),
     new HtmlWebpackPlugin({
       title: "webpack_demo"
     }),
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin()
  ],
  module: {
     rules: [
       {
         test: /.css$/,
         use: [
           "style-loader",
           "css-loader"
         ]
       },
       {
         test: /.(png|svg|jpg|gif)$/,
         use: [
           "file-loader"
         ]
       }
     ]
   }
};
 

npm run start 運(yùn)行http://localhost:8080/  然后你去修改print js的console(或者添加其他代碼) 會(huì)發(fā)現(xiàn)命令行輸出updated. Recompiling... 字樣 這就是簡單的實(shí)現(xiàn)了熱更新

本文只是大概從幾個(gè)demo來對(duì)于webpack的基礎(chǔ)概念 入口entry 出口 output loader plugins mode(沒有直面涉及)幾大模塊的梳理于實(shí)踐,讓大家對(duì)于webpack不在那么陌生!

后續(xù)文章會(huì)從更深入的角度去學(xué)習(xí)webpack! 暫定下周1 發(fā)表文章(內(nèi)容 詳細(xì)介紹hot 實(shí)現(xiàn)一個(gè)簡易的vue-cli等等)
demo的代碼我會(huì)同步github

第二版 : webpack構(gòu)建一個(gè)簡易的my-vue-cli