webpack 實踐筆記（一）--- 入門

時間 2019-11-09

標籤 webpack 實踐筆記入門简体版

原文原文鏈接

webpack 實踐筆記入門（一）

[webpack官網文檔地址]:（http://webpack.github.io/docs...）

[實踐工程地址]: (https://github.com/silence717... )

本篇文章可切換到分支 step1查看源代碼。javascript

what is webpack?

官網對webpack的定義是MODULE BUNDLER，目的就是把有依賴關係的各類文件打包成一系列的靜態資源。html

簡單分步實踐

建立一個空文件夾，進入

cd /Users/silence/code/personal/webpack-practice

全局安裝 webpack

npm install webpack -g

建立index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-practice</title>
</head>
<body>

</body>
</html>

建立app.js

document.write('hello world!');
console.log('App loaded');

執行webpack命令

webpack ./app.js ./bundle.js

這個時候項目中多了一個bundle.js文件，使用script標籤將其引入到index.html中java

<script src="bundle.js"></script>

在瀏覽器中打開index.html文件，頁面出現 hello world! 文字。webpack

動態打包文件

在正常開發過程當中咱們不斷在修改app.js文件，因此得不斷執行打包命令，這樣及其不方便。
咱們須要針對咱們的修改及時做出響應處理。git

爲此建立一個webpack.config.js文件。github

module.exports = {
    entry: ['./app.js'],
    output: {
        filename: 'bundle.js'
    }
};

entry：入口文件使用哪一個文件做爲項目的入口web

output：出口文件打包後的文件放在哪裏npm

1、使用watch模式：

webpack 提供了一個命令--watch，一直監聽文件，只要有變化就自動執行打包命令。這樣會有兩個問題：瀏覽器

* 1. 咱們訪問的地址爲本地文件地址。
* 2. 瀏覽器不能自動刷新。

2、 webpack-dev-server

爲了在開發過程當中優化開發體驗，webpack提供了一個webpack-dev-serverbash

全局安裝

npm install webpack-dev-server

使用webpack-dev-server啓動

webpack-dev-server

命令行出現

http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/silence/code/personal/webpack
Hash: 3786f12b06517d34cf85
Version: webpack 1.13.2

按照提示在瀏覽器中訪問： http://localhost:8080/webpack... ，
如願出現hello world！字樣。

在app.js中隨意更改輸出內容並保存，會看到瀏覽器自動刷新並輸出更改後的內容。

build多個文件

有兩種解決方案

1 使用require.js，引入新模塊到app.js中

建立login.js，文件內容：

console.log('login in');

在app.js中引入

require('./login');

備註一下，webpack原生支持commonJs規範。
運行dev-server，console中輸出login.js的文件內容.

2. 在webpack-config.js中更改entry

建立utils.js文件，內容爲：

console.log('utils.js file ...');

修改entry的配置爲：

entry: ['./app.js', './utils.js'],

運行dev-server，console中輸出utils.js的文件內容。

這就是webpacj的入門級使用，我的體驗

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。