由淺入深學習webpack+vue全家桶，實現知乎日報--webpack建立基本項目步驟（第一節）認識webpack和webpack-dev-server

時間 2021-08-14

標籤 html vue node webpack web npm json windows 瀏覽器 app 欄目應用數學简体版

原文原文鏈接

開始以前：html

1.安裝node環境vue

2.安裝npm或者cnpm（我使用的是npm）node

3.編輯器使用VSCodewebpack

4.瀏覽器使用Chromeweb

*經過npm或者cnpm安裝的依賴，請務必注意版本號！！！太高或者太低的版本都有可能致使運行不成功！npm

1.新建zhihu-daily目錄（如下簡稱根目錄）並在VSCode中打開該目錄，使用「 crtl+` 」打開終端。在終端內輸入：json

npm initwindows

按回車之後，終端面板會提示輸入name、version、description、entry point、author等信息，能夠修改相應的描述，也能夠所有點回車表示默認輸入，而後目錄下會自動生成一個package.json文件。瀏覽器

*注意：name不能夠出現大寫英文字母，不然會報錯。app

{

"name": "zhihu-daily",

"version": "1.0.0",

"description": "zhihu-daily based on webpack and vue",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "h_xingzhiyuan@163.com",

"license": "ISC"

}

在終端內輸入：

npm install webpack --save-dev

安裝webpack依賴，成功之後會在根目錄出現一個"node_modules"文件夾，這個文件夾保存了工程的全部依賴，之後經過npm安裝的依賴所有保存在該文件夾下。

2.在根目錄下新建webpack.config.js文件，這個文件用來保存webpack打包的基本配置信息，代碼以下：

var path = require('path');

var config = {

entry: {

main: './index'

},

output: {

path: path.join(__dirname, './dist'),

publicPath: '/dist/',

filename: 'index.js'

}

}

module.exports = config;

3.在根目錄下建立一個index.html文件，代碼以下：

Document

Document
<!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"> Hello World! </div>

            <script src="/dist/index.js"></script>

        </body>

</html>

4. 在根目錄下新建一個index.js文件，用來演示"頁面加載完成後，延遲5秒修改#app內容"的效果，代碼以下：

setTimeout(() => {

document.getElementById('app').innerHTML = 'Hello Webpack And Vue!';

}, 5000);

5.爲了建立本地運行環境，咱們須要安裝webpack-dev-server，該服務能夠在本地搭建一個運行環境，在瀏覽器地址欄輸入"localhost:8080"就能夠看到咱們經過webpack打包生成的頁面效果。在終端輸入：

npm install webpack-dev-server --save-dev

而後修改package.json文件，在scripts屬性下新加"dev"屬性，該屬性包括了配置運行webpack-dev-server時的配置信息，如：

--open表明自動打開瀏覽器。

--host 0.0.0.0表明運行的域名能夠輸入127.0.0.一、locallost、本機ip，若是不配置默認是localhost，也能夠經過127.0.0.1訪問，可是不能經過本機ip訪問。

--port 8888表明運行的端口號是8888，若是不配置則默認是8080。

代碼以下：

...

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev": "webpack-dev-server --open --host 0.0.0.0 --port 8888 --config webpack.config.js"

},

...

*注意：json文件不能寫註釋，並且屬性名、值須要用雙引號包裹。

6.在終端內輸入：

npm run dev

運行成功之後會自動打開默認瀏覽器，可是因爲咱們設置的域名是"0.0.0.0"，致使在瀏覽器中出現"0.0.0.0:8888"頁面加載錯誤，那麼手動改一下域名爲127.0.0.1（或者localhost、本機ip）就能夠出現咱們剛纔所寫的效果（此狀況出如今windows環境下，mac正常）：頁面加載完成顯示"Hello World!"，5秒後變爲"Hello Webpack And Vue!"。

總結：

（1）在npm init時，name不能有大寫字母出現

（2）在npm init時，若是main選項不默認是index.js，那麼在webpack.config.js中也須要將entry.main選項配置爲"./自定義名字"

（3）在安裝依賴的時候，若是不指明版本號（如：npm install webpack-dev-server），那麼node會根據本地的npm版本安裝相應的依賴，這樣可能會致使運行出錯，因此當出現因爲版本錯誤致使的運行出錯問題時，能夠經過npm remove xx將該依賴刪除，再經過npm install XXX@version（如：npm install webpack-dev-server@2.4.2）進行指定版本的安裝

（4）npm install XXX --save-dev與npm install XXX --save的區別，詳情請參照npm install XXX --save-dev與npm install XXX --save的區別

做者：Waitingforyu 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。