Home > Article > Web Front-end > Webpack基本用法_html/css_WEB-ITnose

Webpack基本用法_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:33:391069browse

本篇体验Webpack的基本面以及一个例子。

■ What is Webpack

● module bundler
● module with dependencies
● module generates static assets

■ Why Webpack

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

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

→ 确认是否安装了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文件

■ 在项目中添加配置文件

→ 在项目根目录下创建名称为webpack.config.js文件
当设置好webpack.config.js文件后，每次我们导航到项目，只要使用webpack这一个命令就可以使用各项功能了。
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
}
}
→ 命令行来到需要Webpack的网站下
→ 直接输入webpack命令
webpack

■ 启用Webpack观察者模式

当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

Webpack Demo

→ 在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文件中的引用路径。

Webpack Demo

在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命令。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：div与span_html/css_WEB-ITnoseNext article：前端开发与SEO_html/css_WEB-ITnose

See more

Webpack基本用法_html/css_WEB-ITnose

Webpack Demo

Webpack Demo

Related articles