查看node和webpack的版本
起步
首先创建一个文件夹webpack4-test,并初始化npm,然后本地安装webpack和webpack-cli。
mkdir webpack4.0-demo && cd webpack4.0-demo
// 初始化npm,并全部使用默认值
npm init -y
本地安装
使用4+版本需要安装webpack-cli,
cnpm install --save-dev webpack webpack-cli
目录结构
src/index要在 index.js 中打包 lodash 依赖,我们需要在本地安装 library:
cnpm install --save-dev lodash
import _ from 'lodash'
function creatEl(){
let el = document.createElement('div');
// Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
el.innerHTML = _.join(['Hello', 'webpack'], ' ');
return el
}
document.body.appendChild(creatEl())
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
package.json
{
"name": "webpack4.0-demo",
"version": "1.0.0",
"description": "",
"private": true,// 删除入口文件,确保我们安装包是私有的(private),使用时请删除掉这段注释
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"lodash": "^4.17.11",
"webpack": "^4.19.0",
"webpack-cli": "^3.1.0"
}
}
执行webpack或者npx webpack,会将脚本作为入口文件,然后输出为main.js
在浏览器中打开 index.html,如果一切访问都正常,你应该能看到以下文本:'Hello webpack'。
使用配置文件
在 webpack 4 中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多,所以让我们创建一个取代以上使用 CLI 选项方式的配置文件。
在主目录先添加一个webpack.config.js文件。
webpack.config.jsconst path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
在package.json中的添加如下
将index.html中的script标签的src改成bundle.js。现在,可以使用 npm run build 命令,来替代我们之前使用的 npx 命令。注意,使用 npm 的 scripts,我们可以像使用 npx 那样通过模块名引用本地安装的 npm 包。管理资源
加载css
为了从 JavaScript 模块中 import 一个 CSS 文件,需要在 module 安装并添加 style-loader 和 css-loader。
cnpm install --save-dev css-loader style-loader
在webpack.config.js中的代码如下
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
}
webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这种情况下,以 .css 结尾的全部文件,都将被提供给style-loader和css-loader。 这使你可以在依赖于此样式的文件中 import 'style.css'。
在src文件夹下添加一个style.css文件
src/style.css
.hello{
color: red;
}
src/index.js
import _ from 'lodash'
import './style.css'
function creatEl(){
let el = document.createElement('div');
// Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
el.innerHTML = _.join(['Hello', 'webpack'], ' ');
el.className = 'hello';
return el
}
document.body.appendChild(creatEl())
重新执行命令,在浏览器中打开index.html可以看到字体变成红色。
加载图片
加载图片需要先安装file-loader
cnpm install --save-dev file-loader
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(jpg|png|svg|gif)$/,
use: [
'file-loader'
]
}
]
}
}
src/index.js
在src文件夹下放一张名为01.jgp的图片
import _ from 'lodash'
import "./style.css"
import Icon from './01.jpg'
function creatEl(){
let el = document.createElement('div');
// Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
el.innerHTML = _.join(['Hello', 'webpack'], ' ');
el.className = 'hello';
let img = new Image();
img.src = Icon
el.appendChild(img)
return el
}
document.body.appendChild(creatEl())
重新执行命令,在浏览器中打开index.html可以看到图片显示。
模块热更新
观察者模式
在package.json添加一个用于启动 webpack 的观察模式的 npm script 脚本:
现在,运行npm run watch,就会看到webpack编译代码后并不会退出。这是因为 script 脚本还在观察文件。唯一的缺点是,为了看到修改后的实际效果,你需要刷新浏览器。如果能够自动刷新浏览器就更好了,可以尝试使用 webpack-dev-server,恰好可以实现我们想要的功能。
webpack-dev-server
cnpm install --save-dev webpack-dev-server
webpack.config.js 中添加这一行代码
package.json中添加如下代码
现在,我们可以在命令行中运行 npm start,就会看到浏览器自动加载页面。如果现在修改和保存任意源文件,web 服务器就会自动重新加载编译后的代码。