webpack安裝和簡單配置

時間 2019-12-09

標籤 webpack 安裝簡單配置简体版

原文原文鏈接

1.webpack是一個基於node的項目,因此先裝好node和npmjavascript

參考個人隨筆：https://www.cnblogs.com/jtnote/p/6230384.htmlcss

2.先建立項目目錄結構，根目錄是mywebpack。進入項目根目錄，執行：npm init，生成package.json文件，內容就是一堆json數據，基本就是在終端裏輸入的信息。html

3.進入項目根目錄局部安裝webpack，進入./mywebpack，執行：npm install webpack --save-dev，局部安裝webpack成功了，根目錄下會出現一個node_modules文件夾前端

4.若是你使用 webpack 4+ 版本，你還須要安裝 CLI。java

npm install --save-dev webpack-cli

5.在項目文件夾下新建webpack.config.js文件，比較簡單的配置以下。node

entry:表示入口文件，能夠有多個入口文件。文件中包含全部邏輯代碼，依賴的其餘文件如css，js等。
output：將入口文件打包、編譯輸出的文件，是頁面最終引入的文件。

var path = require('path');
 var config= {
    entry: path.resolve(__dirname, 'index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index.js',
    },
};

module.exports = config;

6.在項目跟目錄建立index.html文件webpack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my_program</title>
</head>
<body>
   <div id="app">
       helloworld
   </div>
<script type="text/javascript" src="./dist/index.js"></script>
</body>
</html>

7.在項目跟目錄建立index.js文件做爲入口文件web

document.getElementById("app").innerHTML="hello webpack";

8.設置webpack-dev-serverexpress

　　在開發時，每次更改文件後要運行npm run build 來從新編譯、打包文件，無聊又麻煩。咱們能夠設置 webpack-dev-server來讓他自動運行。webpack-dev-server 主要是啓動了一個使用 express 的 Http服務器，它的做用主要是用來伺服資源文件。此外這個 Http服務器和 client 使用了 websocket 通信協議，原始文件做出改動後， webpack-dev-server 會實時的編譯，可是最後的編譯的文件並無輸出到目標文件夾。在webpack.config.js配置文件中增長入口命令可使文件變化時瀏覽器自動刷新。npm

　　首先要安裝它 npm install webpack-dev-server --save-dev。而後在package.json文件的scripts部分增長快捷指令：

1 "scripts": {    
2      "dev": "webpack-dev-server --host 127.0.0.1 --port 8080 --open  --config webpack.config.js"   
3  },

當你在命令行裏運行 npm run dev 的時候他會執行 dev 屬性裏的值，便可啓動webpack服務器監聽。這些指令的意思：

　　webpack-dev-server：在127.0.0.1:8080 創建一個 Web 服務器。

　　--devtool eval: 爲你的代碼建立原地址。當有任何報錯的時候可讓你更精確的定位到文件和行號。

　　--progress：顯示編譯的輸出內容進度。

　　--compress: 啓用gzip壓縮。

　　--hot:熱替換，開發過程當中任何前端代碼的更改都會實時的在瀏覽器中表現出來，不須要手動刷新。

　　--colors：顯示編譯的輸出內容顏色。

　　--inline：webpack提供兩種自動刷新模式 iframe/inline。默認iframe。

詳細請參考 開發中 Server(DevServer)

運行 npm run dev，瀏覽器打開視圖顯示： hello webpack

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。