webpack教程

muddyway 發布于2019-08-22 16:58 / 755人閱讀

1.安裝

先裝好node和npm，因為webpack是一個基于node的項目。然后

npm install -g webpack

2.建立項目

建一個文件夾，然后新建一個package.json的文件在項目根目錄下

mkdir testwebpack
cd  testwebpack
npm init

2.1詢問一些問題:按回車選擇默認值自動生成文件

 package.json
 package name: (webpack-test)   包名(demo)
 version: (1.0.0)               版本
 description:                   描述
 entry point:                   入口程序(main.js)
 test command:                  測試指令("dev": "webpack-dev-server","build": "webpack -p")
 git repository:                node_modules
 keywords:                      關鍵字
 author:                        作者
 license: (ISC) MIT             MIT
 Is this ok? (yes)              yes

3.在創建webpack.config.js

module.exports = {
  entry: "./main.js",  /*你要打包的js文件*/
  output: {
    filename: "bundle.js"  /*打包后生成的文件*/
  },
   module: {
rules:[
  {
    test: /.css$/, /*引入css文件配置*/
    use: [ "style-loader", "css-loader" ]
  },
]
  },
  module: {
rules:[
  {
    test: /.(png|jpg)$/, /*引入圖片文件配置*/
    use: [
      {
        loader: "url-loader",
        options: {
          limit: 8192
        }
      }
    ]
  }
]
 }
};

3.1例如我的main.js里寫

    
document.write("Hello World");

require("./app.css");

var img = document.createElement("img");
img.src = require("./small.png");
document.body.appendChild(img);

3.2查看打包好后使用的JS則創建html文件

4.創建服務器

npm i -g webpack webpack-dev-server

5.安裝依賴關系。

  npm install

6.打包

 npm run dev

云服務器 GPU云服務器 webpack教程 webpack4教程 webpack _webpack

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94738.html

webpack-demos：全網最貼心webpack系列教程和配套代碼

摘要：全網最貼心系列教程和配套代碼歡迎關注個人技術博客。所以我花費了個多月整理了這份教程，一共分成節，每節都有講解，并且準備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網最貼心 webpack 系列教程和配套代碼歡迎關注個人技術博客：godbmw.com。每周 1 篇原創技術分享！開源教程(webpack、設計模式）、面試刷題（偏前...

LMou 2019-08-23 12:25 評論0 收藏0
webpack 教程資源收集

學習的過程中收藏了這些優秀教程和的項目，希望對你有幫助。 github地址, 有不錯的就更新官方文檔中文指南初級教程 webpack-howto 作者：Pete Hunt Webpack 入門指迷作者：題葉　 webpack-demos 作者：ruanyf 一小時包教會 —— webpack 入門指南作者：VaJoy Larn　　 webpack 入門及實踐作者：...

Backache 2019-08-21 14:05 評論0 收藏0
webpack4系列教程（十）：總結

摘要：傳送門系列教程一初識系列教程二創建項目，打包第一個文件系列教程三自動生成項目中的文件系列教程四處理項目中的資源文件一系列教程五處理項目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發環境和生產環境在前端開發日益復雜的今天，我們需要一個工具來幫助我們管理項目資源，打包、編譯、預處理、后處理等等。webpack的出現無疑是前端開發者的福音，我的博文只...

hqman 2019-08-26 13:29 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（一）

摘要：是一個現代應用程序的靜態模塊打包器，前端模塊化的基礎。作為一個前端工程師切圖仔，非常有必要學習。官網的文檔非常的棒，中文文檔也非常給力，可以媲美的文檔。建議先看概念篇章，再看指南，然后看和配置總覽。 webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器，前端模塊化的基礎。作為一個前端工程師（切圖仔），非常有必要學習。 showImg(https://segment...

zhkai 2019-08-23 18:35 評論0 收藏0
webpack 教科書式入門教程

摘要：教程最近剛用完又來搗鼓搗鼓，這只是個簡單的新手入門教程不多說注意安裝前檢查的安裝目錄路徑是否存在空格，建議安裝在無空格文件夾目錄下。 Webpack4.x 教程最近剛用完 gulp 又來搗鼓搗鼓 webpack ，這只是個簡單的新手入門教程...不多說；注意：安裝webpack前檢查nodejs的安裝目錄路徑是否存在空格( Program Files (x86) )，建議安裝在無空格...

13651657101 2019-08-19 18:12 評論0 收藏0
webpack4 系列教程: 前言

摘要：課程地址全部課程地址立即進入課程源碼目錄截至按照知識點，目錄分成了個文件夾之后還會持續更新。個人網站原文鏈接系列教程前言本文檔已經過時，最近內容請看：https://godbmw.com/passage/76。一共16節課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開發者可以輕松地實現加密代碼、多平臺兼容。而最重要的...

DevWiki 2019-08-23 10:25 評論0 收藏0