webpack 4 筆記一 簡介及安裝

2019年3月25日更新,目前 webpack 版本爲4.29.6 。本文根據 webpack 中文文檔,謹以此記錄實操過程,以及遇到的一些疑點難點。如有經驗,最好的方法當然是直接閱讀 官方文檔,跟着碼一遍。

前言

webpack核心作用

其實這個官網也用了一張圖來解釋:
在這裏插入圖片描述
專業解釋也有:

WebPack可以看做是模塊打包機:它做的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其打包爲合適的格式以供瀏覽器使用。

簡單理解就是簡化開發的複雜度、提高開發效率的工具,會用好處多多O(∩_∩)O?

本地安裝

不推薦全局安裝 webpack。這會將你項目中的 webpack 鎖定到指定版本,並且在使用不同的 webpack 版本的項目中,可能會導致構建失敗。

一、安裝

1.在本地創建一個新的項目目錄 webpack-demo ,打開它
2.使用 cnpm init -y 創建package.json文件
3.使用 cnpm i --save-dev webpack webpack-cli 局部安裝最新版 webpack
4.執行 node_modules/.bin/webpack -v 檢查webpack是否安裝成功
在這裏插入圖片描述
5.創建以下兩個文件夾(dist、src)以及 index.html 、 index.js 文件,並安裝 loadsh 依賴

cnpm install --save lodash

在這裏插入圖片描述

文件夾 作用
dist 存放我們編寫的各種本地文件
src 存放webpack打包後的數據

src/index.js

 import _ from 'lodash';
 
  function component() {
    var element = document.createElement('div');

   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

dist/index.html

 <!doctype html>
  <html>
   <head>
     <title>起步</title>
   </head>
   <body>
    <script src="main.js"></script>
   </body>
  </html>

6.這之後運行 npx webpack
可以看到編譯成功了:
在這裏插入圖片描述
此時打開 index.html ,訪問正常如下:
在這裏插入圖片描述

二、使用配置文件以及腳本

在 webpack 4 中,可以無須任何配置使用,然而大多數項目會需要很複雜的設置,這就是爲什麼 webpack 仍然要支持 配置文件。這比在終端(terminal)中手動輸入大量命令要高效的多。

1.創建一個取代以上使用 CLI 選項方式的配置文件:
webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

2.在 package.json 添加一個 npm 腳本(npm script):
在這裏插入圖片描述
現在,可以使用 npm run build 命令,來替代之前使用的 npx 命令:
在這裏插入圖片描述
打開 index.html :
在這裏插入圖片描述
這裏的問題我覺得主要是引用與輸出文件名稱不一致導致的
在這裏插入圖片描述
將 index.html 的導入文件改爲 bundle.js 即可
在這裏插入圖片描述

結論

現在,按照文檔已經實現了一個基本的構建過程,官網的中文文檔已經是十分詳細的了,這裏照着碼了一遍,過程中遇到了一些細節問題,不過問題不大,細心即可解決?

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章