webpack教程

muddyway 發(fā)布于2019-08-22 16:58 / 767人閱讀

1.安裝

先裝好node和npm，因?yàn)閣ebpack是一個(gè)基于node的項(xiàng)目。然后

npm install -g webpack

2.建立項(xiàng)目

建一個(gè)文件夾，然后新建一個(gè)package.json的文件在項(xiàng)目根目錄下

mkdir testwebpack
cd  testwebpack
npm init

2.1詢問一些問題:按回車選擇默認(rèn)值自動(dòng)生成文件

 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:                      關(guān)鍵字
 author:                        作者
 license: (ISC) MIT             MIT
 Is this ok? (yes)              yes

3.在創(chuàng)建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則創(chuàng)建html文件

4.創(chuàng)建服務(wù)器

npm i -g webpack webpack-dev-server

5.安裝依賴關(guān)系。

  npm install

6.打包

 npm run dev

GPU云服務(wù)器云服務(wù)器 webpack教程 webpack4教程 webpack _webpack

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94738.html

相關(guān)文章

webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

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

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

學(xué)習(xí)的過程中收藏了這些優(yōu)秀教程和的項(xiàng)目，希望對你有幫助。 github地址, 有不錯(cuò)的就更新官方文檔中文指南初級(jí)教程 webpack-howto 作者：Pete Hunt Webpack 入門指迷作者：題葉　 webpack-demos 作者：ruanyf 一小時(shí)包教會(huì) —— webpack 入門指南作者：VaJoy Larn　　 webpack 入門及實(shí)踐作者：...

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

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

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

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

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

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

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

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

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