當前位置：首頁 >

webpack 初体验

發布時間：2025/3/20 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack 初体验小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

翻墻看視頻教程：https://www.youtube.com/watch?v=TaWKUpahFZM
看了教程，自己練習練習，記個筆記，我把教程的例子劃分成5個獨立小demo，加強練習，也方便梳理思路
教程是連貫的，對于獨立Demo每次都會有一些重復操作，所以都是基于前面進行修改的
Demo源碼地址：https://github.com/dingyiming/learn-Tools-webpack/tree/master/demos/youtube

預先準備

安裝好npm，了解基本使用
目錄中新建頁面文件 index.html，后面幾個demo都以這個訪問的基礎，第一次創建后，后面都直接復制進目錄下即可

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>webpack demo</title> </head> <body>  <script src="a.js" charset="UTF-8"></script> </body> </html>

Demo1 webpack1 生成js

1.新建目錄demo1

mkdir demo1

2.在項目目錄下初始化npm

cd demo1 npm init

3.下載webpack

npm i webpack --save-dev

4.向package.json中添加webpack加載內容

"script" : {"start" : "webpack ./index.js a.js" }

5.在目錄下新建index.js,并輸入如下代碼

alert('OK webpack') //彈窗顯示OK

6.打包初體驗

npm start

7.打開index.html查看結果

open index.html

8.結果如圖

Demo2 webpack2 模塊加載

1.復制一份Demo1目錄命名為Demo2
2.修改index.js中代碼

alert('OK webpack' + require('./bear.js'))

3.新建bear.js

module.exports = 'Oh! It works!'

4.npm start 打包
5.open index.html 訪問查看
6.結果如圖

Demo3 webpack-dev-server

1.復制一份Demo2目錄命名為Demo3
2.npm下載webpack-dev-server

npm i webpack-dev-server --save-dev

3.更改package.json中代碼：

"scripts": {"start": "webpack-dev-server ./index.js"},

4.用webpack-dev-server打包

npm start

5.瀏覽器訪問 localhost:8080
6.結果如圖

Demo4 use jquery

1.復制一份Demo3目錄命名為Demo4
2.加載jquery

npm i jquery --save

3.更改bear.js內容為

var $ = require('jquery') module.exports = $('<div/>').html('Hello Webpack')

4.更改index.js

require(['./bear.js',function(bear){document.body.appendChild(bear[0]) }])

5.打包npm start 訪問localhost:8080
6.結果如圖

Demo5 use css

1.復制一份Demo4目錄命名為Demo5
2.更改bear.js

var $ = require('jquery')require('./bear.css')module.exports = $('<div/>').html('OK! Webpack!')

3.新建bear.css

@import "base.css"; div{color:red; }

4.新建bese.css

body{background: green; }

5.下載css加載工具

npm i css-loader --save-dev

6.下載style加載工具

npm i style-loader --save-dev

7.新建webpack.config.js文件

module.exports = {entry : './index.js',output : {path : __dirname,filename : 'a.js'},module : {loaders : [{ test : /\.css$/,loader : 'style!css!'}]} }

8.打包npm start ,訪問localhost:8080

9.結果如圖

OK! 繼續學習vuejs and webpack

總結

以上是生活随笔為你收集整理的webpack 初体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Daily Scrum - 11/24
下一篇：学习spring2--跟我一起学Spri