webpack4.17.1起步

時間 2019-12-05

標籤 webpack4.17.1 webpack 起步简体版

原文原文鏈接

本地安裝webpack

npm install --save-dev webpack

若是使用webpack4+版本，須要安裝webpack-clihtml

npm install webpack webpack-cli --save-dev

初始化npm

初始化npm後，會生根目錄下成一個package.jsonnode

npm init -y

建立文件目錄，文件，內容

文件結構webpack

webpack
|-/src
  |-index.js
|-index.html
|-package.json

src/index.jsweb

function component () {
  var ele = document.createElement('div')
  // Lodash[Lodash 經過下降 array、number、objects、string 等等的使用難度從而讓 JavaScript 變得更簡單。
  // Lodash 的模塊化方法 很是適用於：
  // 遍歷 array、object 和 string
  // 對值進行操做和檢測建立符合功能的函數 https://www.lodashjs.com/]（目前經過一個 script 腳本引入）對於執行這一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

index.htmlnpm

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

package.json
實際狀況中，json文件中不容許有註釋，若是有註釋，會致使安裝不了依賴json

{
  ...
  "name": "webpack",
  "version": "1.0.0",
  // "main": "index.js", // 而且移除 main 入口
  "private": true, // 以便確保咱們安裝包是私有的(private) 這能夠防止意外發布你的代碼
   ...
}

總結：經過script腳本引入三方資源會帶來一些問題，以下：瀏覽器

沒法當即體現，腳本的執行依賴於外部擴展庫(external library)
若是依賴不存在，或者引入順序錯誤，應用程序將沒法正常運行
若是依賴被引入可是並無使用，瀏覽器將被迫下載無用代碼

使用 webpack 來管理這些腳本app

建立一個 bundle 文件

調整目錄結構模塊化

webpack
|-/src "源"代碼，用於書寫和編輯的代碼
  |-index.js
|-/dist "分發"代碼是構建過程產生的代碼最小化和優化後的「輸出」目錄，最終將在瀏覽器中加載
  |-index.html
|-package.json

再也不使用script引入三方資源，要在 index.js 中打包 lodash 依賴，安裝lodash函數

npm install --save-dev lodash

修改src/index.js文件

// 再也不使用script引入lodash 本地已安裝loadash,使用import引入lodash
import _ from 'lodash'
function component () {
  var ele = document.createElement('div')
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

修改dist/index.html文件

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <!-- 由於如今是經過 import 引入 lodash，因此將 lodash <script> 刪除 -->
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
  </head>
  <body>
    <!-- 而後修改另外一個 <script> 標籤來加載 bundle，而不是原始的 /src 文件-->
    <script src="main.js"></script>
    <!-- <script src="./src/index.js"></script> -->
  </body>
</html>

執行npx webpack,構建成功後，在瀏覽器中打開index.html

使用一個配置文件

新增webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/index.js', // 入口文件
  output: { // 構建後的bundle.js文件輸出到dist文件中
    filename: 'bundle.js',
    // _dirname表示當前文件所在的目錄的絕對路徑
    path: path.resolve(_dirname, 'dist')
  }
};

再次npx webpack --config webpack.config.js
使用cli（npx webpack）來運行本地node_module/.bin/webpack文件,反正我是一直沒有構建成功，多是本地環境問題。QAQ ===

使用npm腳本

太好了，還好還有另一種方式，555，咱們能夠設置一個快捷方式。在 package.json 添加一個 npm 腳本(npm script)
package.json 【package.json文件中不能有註釋】

{
    ...
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack" // 添加一個 npm 腳本(npm script)
     },
    ...
}

如今咱們就可使用npm run build 命令，來代替npx命令，這裏遇到一點問題QAQ