必會webpack（一）--- 初識webpack

錦魚發表於2019-04-27
Web

準備工作

在開始為專案加入構建前，需要先新建一個web專案，有如下方式：

  • 新建一個目錄，再進入專案根目錄執行npm init
  • 用腳手架工具Yeoman(yeoman.io)直接、快速地生成一個最符合自己的需求的專案

安裝webpack到本專案

安裝Webpack到本專案，可根據自己的需求選擇一下任意命令執行

#npm i -D 是npm install --save-dev的簡寫，是指安裝模組並儲存到package.json的devDependencies

#安裝最新的穩定版 npm i -D webpack

安裝最新的體驗版本 npm i -D webpack@beta

安裝webpack到全域性

npm i -g webpack

推薦使用這種方式安裝，防止不同的專案因依賴不同版本的Webpack而導致衝突

簡單實戰

  1. npm install webpak --save--dev(建議使用yarn add webpack 來進行安裝)
  2. npm init(建立一個package.json檔案，本次使用yarn init)
  3. 在package.json檔案中配置打包命令 "scripts": { "start": "webpack --config webpack.config.js" },
  4. 搭建專案目錄，如下

專案目錄

  • index.html
  • main.js
  • show.js
  • webpack.config.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
         
    </div>
</body>
<script src="./dist/bundle.js"></script>
</html>
複製程式碼
main.js
// 通過commonjs規範匯入show函式
const show = require('./show.js');
show('Webpack');
複製程式碼
show.js
// 操作DOM元素，將content顯示到頁面上
function show(content){
    window.document.getElementById('app').innerHTML('hello'+content)
}

module.exports = show;
複製程式碼
webpack.config.js
const path = require('path');

module.exports = {
    // JavaScript執行入口檔案
    entry: './main.js',
    output:{
        // 將所有依賴的模組合併輸出到一個bundle.js檔案
        filename: 'bundle.js',
        // 將輸出檔案都放到dist目錄下
        path: path.resolve(__dirname, './dist'),
    }
}
複製程式碼
開始執行
npm run start
複製程式碼

最終在目錄下生成一個dist目錄，目錄下生成了一個bundle.js檔案，bundle.js是一個可執行的javascript檔案，它包含頁面所依賴的兩個模組main.js、show.js，以及內建的webpackBootstrap啟動函式。這時用瀏覽器開啟index.html網頁，將會看到Hello Webpack

總結

本章只是簡單的介紹了下webpack的簡單使用，通過本章應該記住如何去構建一個webpack環境。接下來一章我會介紹如何使用Loader、使用Plugin、使用DevServer

相關文章