webpack安裝教程及執行個體

來源:互聯網
上載者:User

標籤:script   set   title   控制台   put   conf   config   entry   name   

在控制台輸入:

npm install webpack -g

這是全域的安裝,如果需要局部安裝,在控制台cd 開啟到指定目錄,輸入:

npm install webpack --save-dev

即可。

執行個體:

  1. 建立index.html檔案
  2. 建立main.js檔案
  3. 建立webpack.config.js檔案

index.html

<html lang="en"> <head>    <title></title>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body>    <script type="text/javascript" src="bundle.js"></script></body> </html>

 

main.js

document.write("<h1>Hello World</h1>");

 

webpack.config.js

module.exports = {    entry: "./main.js",//這是源檔案    output: {        filename: ‘bundle.js‘ //這是產生的新檔案    }};

 

三個檔案建立好之後,我們需要把項目運行起來,使用live-server來運行項目。

在控制台直接輸入:

npm install live-server -g

安裝成功之後,在控制台cd開啟到項目的根目錄,然後在控制台先輸入webpack命令,webpack就是執行打包指令,打包成功之後,

在控制台輸入:

live-server

即可運行項目。

 

webpack安裝教程及執行個體

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.