Osheep

时光不回头,当下最重要。

webpack 模块打包工具

介绍

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)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-test</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

然后在命令行执行:

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文件进行工作了,有什么不对的地方,欢迎指出,谢谢。

点赞