Webpack基本用法

時間 2019-11-09

標籤 webpack 基本用法简体版

原文原文鏈接

本篇體驗Webpack的基本面以及一個例子。javascript

■ What is Webpackcss

● module bundler
● module with dependencies
● module generates static assetshtml

■ Why Webpackjava

● good for development but also the user experience
● loaded on demand
● cache friendly
● webpack plugins can be injected into into the build processnode

■ 首次使用Webpack, 用CLI, 即Command Line Interfacewebpack

→ 確認是否安裝了NodeJS
npm -v
→ 安裝 Webpack
npm install webpack -g
→ 建立一個簡單的網站
.....webpacktest/
..........app.js
..........index.html
→ 導航到webpacktest所在文件夾
→ 對app.js文件使用webpack
webpack ./app.js bundle.js
→ 咱們看到在webpacktest目錄下多了一個bundle.js文件
→ 如今，能夠在index.html中引用bundle.js文件，而不是app.js文件git

■ 在項目中添加配置文件github

→ 在項目根目錄下建立名稱爲webpack.config.js文件
當設置好webpack.config.js文件後，每次咱們導航到項目，只要使用webpack這一個命令就能夠使用各項功能了。
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
}
}
→ 命令行來到須要Webpack的網站下
→ 直接輸入webpack命令
webpackweb

■ 啓用Webpack觀察者模式npm

當webpack.config.js的配置發生變化，若是每次都要手動輸入webpack命令來生成js文件的話，顯得相對麻煩一些。Webpack爲咱們提供了觀察者模式，啓用後，任何的webpack.config.js中的變化將接受觀察，自動生成最終的js文件。

→ 命令行來到須要Webpack的網站下
→ 啓用觀察者模式
webpack --watch
→ 在webpack.config.js中添加watch字段，並設置成true
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
},
watch: true
}
→ 這樣，每次修改保存webpack.config.js中引用文件，bundle.js的文件會自動更新。

■ 安裝啓用Webpack DevServer

→ 導航到目標網站目錄
→ 輸入npm命令安裝Webpack DevServer
npm install webpack-dev-server -g
→ 輸入webpack-dev-server命令
webpack-dev-server
→ 看到大體以下內容
http://localhost:8080/webpack-dev-server
webpack result is served from /
cotent is served from D:\...
Hash:...
Version:webpack1.12.4
Time:94ms
...
webpack: bundle is now VALID.
→ 在瀏覽器中輸入：http://localhost:8080/webpack-dev-server/
同時顯示app.js文件中console.log和document.write的內容。
→ 修改webpack.config.js中依賴的文件並保存，瀏覽器中的內容就會自動更新

→ 若是不想顯示console.log內容呢？
→ 在瀏覽器中輸入：http://localhost:8080/
→ 此時，再修改webpack.config.js中依賴的文件並保存，瀏覽器的內容卻不會更新？
→ 再次回到命令行，加入一個inline的flag
webpack-dev-server --inline
→ 此時，若是修改webpack.config.js中依賴的文件並保存，瀏覽器中的內容就會自動更新了☺

■ Bundling多個文件

→ 在項目下再添加一個login.js文件
console.log('login loaded');
→ app.js中引用login.js文件
require('./login');

document.write("Welcome to Big Hair Concerts!!Baby");
console.log('App loaded');
→ 在瀏覽器中輸入：http://localhost:8080/
能夠看到變化。
→ 在項目下再添加一個utils.js文件
console.log('logging from the utils.js file...');
→ 來到webpack.config.js下配置以下：
module.exports = {
entry: ["./utils","./app.js"],
output: {
filename: "bundle.js"
},
watch: true
}
→ 命令行導航到當前項目下
→ 從新啓用Webpack DevServer
webpack-dev-server
→ 在http://localhost:8080/中體現了相應的變化

■ 一個例子

→ 建立一個名稱爲demo的文件夾

→ 命令行導航到demo文件夾

→ 建立package.json文件

npm init
而後在命令窗口輸入各類信息或直接按Enter鍵確認，直至最終在demo下建立了package.json文件。

→ 爲當前demo項目建立webpack

npm intall webpack --save-dev

運行成功後

● 在demo文件夾下多了node_modules文件夾
● 在package.json中多了有關webpack的配置

{
"name": "demo",
"version": "1.0.0",
"description": "some description about demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Darren",
"license": "ISC",
"devDependencies": {
"webpack": "^1.12.5"
}
}

如今，就能夠在當前的demo項目下，在命令行窗口中運用各類命令了。

→ 輸入以下命令查看webpack的命令語法

webpack -h

→ 在demo下建立webpack.config.js文件

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

→ 在demo下建立main.js

document.write("Webpack for the win!");

→ 在demo下運行webpack命令

webpack

運行成功，在demo下多了一個bundle.js文件。

→ 在demo下添加index.html

<html>
<head>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<h1>Webpack Demo</h1>
</body>
</html>

→ 在demo下建立second.js

module.exports = document.write("Oh yeah another file");

→ 在main.js中引用second.js文件

require('./second.js');
document.write("Webpack for the win!");

→ 在當前demo項目下使用webpack命令

webpack

發現second.js文件已被引用到bundle.js文件中了。

→ 在當前demo項目下使用webpack -p命令

webpack -p

這樣，bundle.js文件的內容呈壓縮狀態。

→ 爲當前項目添加loader

各類loader在這裏：http://webpack.github.io/docs/list-of-loaders.html

好比添加一個CoffeeScript loader

npm install coffee-loader --save-dev

運行成功後。

● 在node_modules文件夾下多了一個coffee-loader子文件夾。
● 在package.json中多了與coffee-loader相關的配置

● 在webpack.config.js中添加coffee-loader相關

module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.coffee$/, loader: "coffee-loader" }
]
}
};

在demo下添加third.coffee文件。

alert "webpack is boss!"

在main.js中引用third.coffee文件。

require('./second.js');
require("./third.coffee");
document.write("Webpack for the win!");

運行webpack命令，在bundle.js中多了與third.coffee文件相關的內容。

→ 添加CSS和圖片

命令行導航到demo文件夾下，運行以下：

npm install style-loader css-loader url-loader --save-dev

運行成功後，在node_modules中多了css-loader, style-loader,在package.json中也多了相關配置：

在webpack.config.js中添加以下配置：

module.exports = {
entry: './main.js',
output: {
path: './build', // This is where images AND js will go
publicPath: 'http://yoururl.com/', // This is used to generate URLs
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.coffee$/, loader: "coffee-loader" }，
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
};

注意，在output中，把build用來存放生成的bundle.js和圖片文件。publicPath用來存放網站地址。

修改index.html文件中的引用路徑。

<html>
<head>
<script type="text/javascript" src="./build/bundle.js"></script>
</head>
<body>
<h1>Webpack Demo</h1>
</body>
</html>

在demo下添加image.coffee文件。

img1 = document.createElement("img")
img1.src = require("./your-small-image.png")
document.body.appendChild img1

img2 = document.createElement("img")
img2.src = require("./your-big-image.png")
document.body.appendChild img2

在main.js中添加require("./image.coffee")

require('./second.js');
require("./third.coffee");
require("./image.coffee");
document.write("Webpack for the win!");

在demo下建立styles.css文件。

body {
background: tomato;
}

在main.js中添加require("./styles.css")

require('./second.js');
require("./third.coffee");
require("./image.coffee");
require("./styles.css")
document.write("Webpack for the win!");

運行webpack命令。

相關標籤/搜索

每日一句

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