當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack 初体验

發(fā)布時(shí)間：2025/3/20 编程问答 19 豆豆

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

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

預(yù)先準(zhǔn)備

安裝好npm，了解基本使用
目錄中新建頁面文件 index.html，后面幾個(gè)demo都以這個(gè)訪問的基礎(chǔ)，第一次創(chuàng)建后，后面都直接復(fù)制進(jìn)目錄下即可

<!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.在項(xiàng)目目錄下初始化npm

cd demo1 npm init

3.下載webpack

npm i webpack --save-dev

4.向package.json中添加webpack加載內(nèi)容

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

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

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

6.打包初體驗(yàn)

npm start

7.打開index.html查看結(jié)果

open index.html

8.結(jié)果如圖

Demo2 webpack2 模塊加載

1.復(fù)制一份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.結(jié)果如圖

Demo3 webpack-dev-server

1.復(fù)制一份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.結(jié)果如圖

Demo4 use jquery

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

npm i jquery --save

3.更改bear.js內(nèi)容為

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.結(jié)果如圖

Demo5 use css

1.復(fù)制一份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.結(jié)果如圖

OK! 繼續(xù)學(xué)習(xí)vuejs and webpack

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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