介绍
webpack
是一款模块加载器兼打包工具,它能把各种资源JS/CSS/图片
等都作为模块来使用和处理。
webpack
是以 commonJS
的形式来书写脚本,对 AMD/CMD
的支持也很全面,方便其它模块也兼容使用
扩展性强,插件机制完善,能被模块化处理的资源多,例JS/CSS/IMG
等
开发便捷,能替代部分 grunt/gulp
的工作,比如打包、压缩混淆、图片转base64等。
安装
webpack
依赖于Node.js
,所以安装webpack
之前一定要先安装 Node.js
npm install webpack -g
全局安装webpack
就可以在任何地方使用了
webpack -h
返回一些帮助的信息(说明已经安装成功)
使用
mkdir webpack-test
cd webpack-test/
npm init -y
生成 package.json
npm install webpack --save-dev
安装到当前项目开发依赖里面
用编辑器打开当前项目文件夹
新建一个 entry.js
代码:
document.getElementById('app').textContent = 'hello !';
新建一个初始化 html
(index.html)
webpack-test
然后在命令行执行:
webpack entry.js bundle.js // webpack 入口文件 生成新文件
目录下就生成了 bundle.js
用浏览器打开 index.html
,页面输出 hello ! 说明打包完成
和其它模块一起打包
当前目录下创建一个 name.js
用模块倒出的方式输出
module.exports = 'boloog';
修改 entry.js
引入name
框架
var name = require('./name');
document.getElementById('app').textContent = 'hello - ' + name;
然后在命令行执行:
webpack entry.js bundle.js
页面输出 hello - boloog 说明打包完成
安装loader (转换器)
当前 webpack
只能处理js文件,处理css文件需要安装 loader(css-loader style-loader)
npm install css-loader style-loader --save-dev
安装到当前项目到开发依赖
创建一个 style.css
body{
background-color: red;
color: #fff;
font-size: 30px;
}
修改 entry.js 引入css
var name = require('./name');
require('style-loader!css-loader!./style.css');
document.getElementById('app').textContent = 'hello - ' + name;
然后在命令行执行:
webpack entry.js bundle.js
页面输出 hello - boloog 字体白色,背景红色,说明打包完成
webpack 配置文件实现命令打包
新建一个 webpack.config.js
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
相关配置可以参考 webpack配置
修改 entry.js
引入css
去掉 loader名
var name = require('./name');
require('./style.css');
document.getElementById('app').textContent = 'hello - ' + name;
然后在命令行执行:
webpack
页面输出 hello - boloog 字体白色,背景红色,说明打包完成
调试代码 source-map
显示编辑之前的文件
然后在命令行执行:
webpack --devtool source-map
当前目录会生成一个 bundle.js.map
打开调试模式,重新刷新一下,Sources
菜单生成 webpack://
目录,此时可以看到代码编译之前的源码
bable babel-preset-es2015 处理 es2015 的js新写法
安装相关依赖
npm install babel-core babel-loader babel-preset-es2015 --save-dev
Babel的配置文件 目录下新建 .babelrc
配置文件,该文件用来设置转码规则和插件,基本格式如下。
{
"presets": ["es2015"]
}
修改 webpack.config.js
添加编译 es2015
的写法
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // 排除 不编译当前目录下的js
use: {
loader: 'babel-loader',
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
修改 name.js
使用es6语法进行编写
let name = 'boloog'
export default name
修改 entry.js
使用es6语法进行编写
import name from './name'
import './style.css'
document.getElementById('app').textContent = 'hello - ' + name
然后在命令行执行:
webpack
打包完成
webpack-dev-server 模块热替换
它可以帮我们生成一个开发用的服务器,可以自动打包和只刷新有变化的地方(比如界面,样式等)
全局安装 npm install webpack-dev-server -g
安装到项目开发依赖里 npm install webpack-dev-server --save-dev
命令执行:
webpack-dev-server --inline --hot
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 54fb3429ee7a8cf1b9ff
...
提示打开 http://localhost:8080/
打开调试模式,重新刷新一下,Console
菜单下打印出 (表示热替换已启动)
[HMR] Waiting for update signal from WDS...
bundle.js:4398 [WDS] Hot Module Replacement enabled.
为了实现热替换,在 entry.js
创建一个输入框
let input = document.createElement('input')
document.getElementById('app').appendChild(input)
保存,当前页面上就出现了一个文本输入框,在文本框随意输入内容
再修改下 style.css
的样式
body{
background-color: blue;
color: #fff;
font-size: 20px;
}
保存,此时页面样式变化了,文本框输入的内容还存在,说明模块热启动成功,如果手动刷新当前页面,文本框内容就没有了。
关掉正在执行的热替换命令
ctrl+c
源码
源码
结语
好了,从现在开始你也可以用webpack
编译js,css
文件进行工作了,有什么不对的地方,欢迎指出,谢谢。