webpack

時間 2019-12-05

標籤 webpack 简体版

原文原文鏈接

請參考右邊網頁的Installation和Getting Started篇：https://webpack.js.org/guides/javascript

安裝webpack

先使用git bash進入一個你想安裝的位置，而後請在git bash裏輸入以下命令，該命令將下載最新版本的webpack。html

cd //這裏填寫你想安裝的位置
npm install --save-dev webpack

webpack安裝成功及文件夾中新增文件以下二圖：

java

新建信息文件package.json

webpack安裝成功後，若是想在目錄下新建一個webpack相關的信息文件，請使用下面命令：node

npm init -y

信息文件package.json新建成功及文件夾中新增文件以下二圖：

react

加載Lodash

方法1

首先，修改文件夾結構，添加下圖中沒有的文件夾和文件：
webpack

node_modules、package-lock.json是下載webpack產生的文件

package.json是webpack相關的信息文件，如今須要修改私密性git

+   "private": true,        //前面加號表示請 添加 這行
-   "main": "index.js",     //前面減號表示請 刪除 這行

添加index.htmlweb

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

添加./src/index.jschrome

function component() {
    let element = document.createElement('div');

    // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component());

完成添加、修改，運行index.html，看到以下結果，說明正確：
npm

方法2

修改文件夾結構，將index.html移入文件夾dist中：

在webpack安裝目錄下，使用以下命令安裝lodash

cd //這裏填寫webpack安裝目錄
npm install --save lodash

安裝成功後，會在node_modules裏添加新文件夾lodash、lodash.debounce：

修改./src/index.js

import _ from 'lodash'    //👈新添加的語句

function component() {
    let element = document.createElement('div');

    //Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello','webpack'],' ');

    return element;
}

document.body.appendChild(component());

修改./dist/index.html

<!doctype html>
<html>
<head>
    <title>Getting Started</title>
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->    //👈刪除
</head>
<body>
    <!-- <script src="./src/index.js"></script> -->        //👈刪除
    <script src="main.js"></script>         //👈添加
</body>
</html>

完成修改後，還需運行下述命令，肯定以./src/index.js爲入口（entry point），輸出./dist/main.js（output）：

npx webpack

輸入上述命令後，會提示安裝webpack-cli，安裝就是了，成功及文件夾dist新增文件以下圖：

完成上述修改，運行index.html，看到以下結果，說明正確：

注意！！至此，在chrome、edge中都行正常顯示，firefox中還需在index.html的<head>裏添加<meta charset="utf-8">才能看到正確結果

新建配置文件webpack.config.js

webpack官方教程裏說，若是你是用的是version 4，那其實你是不須要配置文件的，可是不少項目很複雜，可能會用到不少配置，因此仍是新建一個配置文件吧。

As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a configuration file.

首先，請自行建立配置文件./webpack.config.js，(ﾉ*･ω･)ﾉ，指示圖標也變得不同了：

添加webpack.config.js內容，配置文件基本格式：

const path = require('path');

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

git bash裏操做，將默認配置文件替換爲這個配置文件，且成功以下圖：
```
npx webpack --config webpack.config.js
```

便民優化

修改`./dist/main.js`更新命令

請參考：https://webpack.js.org/guides...

至此，webpack基本操做已經完成。
當你修改./src/index.js、./dist/index.html等會改變頁面顯示的時候，都須要在git bash中輸入命令npx webpack進行更新（導出新的./dist/main.js），若是你不喜歡這個命令，你能夠自行設置命令。

若是你須要修改更新命令，請修改信息文件./package.json：

{
  "name": "react-todolist",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "dependencies": {
      "lodash": "^4.17.11",
      "webpack": "^4.20.2"
  },
  "devDependencies": {
      "webpack-cli": "^3.1.2"
  },
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack"        //👈新添內容
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

完成上述添加後，你就能夠在git bash中使用以下命令對./dist/main.js進行更新：
```
npm run build
```
成功！！

開啓`watch`模式，捨棄次次`npm run build`、`npx webpack`

請參考：https://webpack.js.org/guides...

watch模式會自動監聽你這個文件夾裏全部的文件，當你修改一些文件須要更新頁面，再也不須要在git bash裏反覆輸入npm run build、npx webpack或者你自定義的更新命令，只須要刷新頁面就能夠查看更新的結果。

若是你須要開啓watch模式，請在信息文件package.json裏添加以下👈代碼：

{
    "name": "react-todolist",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "dependencies": {
        "lodash": "^4.17.11"
    },
    "devDependencies": {
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.2"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "watch": "webpack --watch"        //👈新添加的代碼，開啓`watch`模式
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

想要退出watch模式，只需在git bash裏按下快捷鍵ctrl + c，若是你沒改過快捷鍵的話ㄟ( ▔, ▔ )ㄏ

使用`webpack-dev-server`

請參考：https://webpack.js.org/guides...

watch模式讓你少寫一種git bash命令，webpack-dev-pack讓你都再也不須要寫git bash命令就能更新瀏覽器。

想要啓動webpack-dev-server模式，首先須要使用git bash進行安裝：
```
npm install --save-dev webpack-dev-server
```

其次，你須要更改配置文件webpack.config.js：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    devServer: {                    //👈新增
        contentBase: './dist'       //👈新增
    },                              //👈新增
};

配置完成後，須要在信息package.json中插入如下👈代碼：

{
    "name": "react-todolist",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "dependencies": {
        "lodash": "^4.17.11"
    },
    "devDependencies": {
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.9"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "watch": "webpack --watch",
        "start": "webpack-dev-server --open"    //👈新增
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}