webpack 入门 |

一、webpack 入门

1.1 简介

一个功能强大的js模块打包工具，可以把 CommonJS 模块，AMD 模块，ES6 模块打包在一起
借助于 loader 插件，webpack 可以将 css、img、tpl 等 其它文件 也一起打包

1.2 打包模式

1.2.1 未打包模式

普通模式开发网站，需要在页面中通过 script 标签去组织 js 的 加载顺序 ，每个单独 js 的 依赖 不明确
同时还会造成 过多 的 http 请求，拖慢网站的载入速度

<html>
    <head>
        <meta charset="UTF-8">
        <title>原始模式</title>
    </head>
    <body>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/main.js"></script>
        <script src="js/a.js"></script>
        <script src="js/b.js"></script>
    </body>
</html>

1.2.2 打包模式

webpack提供了 一站式 解决方案，不论你采用 何种 模块化，都可以帮你完成 打包 任务
为了 减少http 请求, 可以采用一种 模块化 的方式编写如下代码, 然后 打包 成一个 js 文件
打包命令:

1 2	$ webpack 入口文件打包后文件 $ webpack src/main.js dist/bundle.js

以main.js为入口进行打包，打包后的文件放置到dist目录，起名为bundle.js

<html>
    <head>
        <meta charset="UTF-8">
        <title>模块打包</title>
    </head>
    <body>
        <!-- 引入一个打包后的文件即可 -->
        <script src="js/bundle.js"></script>
    </body>
</html>

二、使用配置文件

上面使用 命令行 的打包方式比较繁琐, 每次都要 手动输入 很多内容, 而且不能复用
webpack提供了 配置文件 的方式来描述整个打包过程, 这样只要 写一次 配置以后就方便了, 一劳永逸
同时配置文件也可以让团队不同 成员共享, 不同开发者不同平台以 相同 的方式进行打包

2.1 目录结构说明

使用了打包系统后，通常会把 源代码 与 打包后 的代码放置到src与dist两个不同的目录分离存储
这样做即不会破坏原有的代码与结构，也不会引起混乱

2.2 使用说明

首先在项目中创建一个webpack.config.js配置文件
该配置文件使用node的方式编写代码, 要求必须向外导出一个配置对象, 供webpack工具调用
有了配置文件, 之后的打包操作, 只需运行一条webpack命令即可，webpack会自动读取本地webpack.config.js配置的规则进行打包，如有必要还可以通过webpack --config filename自定义配置文件

2.3 配置

// 导入 Node 内置的path模块, 因为有些路径配置必须为绝对路径, 要通过该模块的方法进行动态计算
const path = require('path');

// 导出配置项
module.exports = {
    // 配置入口模块, webpack会从这个模块开始分析项目的所有依赖, 然后进行打包
    entry: path.resolve(__dirname, 'src/main.js'),
    // 配置打包后文件的输出目录与文件夹
    output: {
        path: path.resolve(__dirname, 'dist'),     // 这里必须为绝对路径，否则报错
        filename: 'js/bundle_[chunkhash:8].js'   // [chunkhash:8]的作用是给文件添加唯一的标识符，预防浏览器缓存
    }
};

2.4 开发模式

打包命令: webpack -d
解释: 因为打包后的代码不便于调试, 所以webpack提供了开发模式打包
使用后会依据打包后代码生成sourceMap用于浏览器调试

三、webpack-dev-server

3.1 简介

这是一个基于webpack的开发工具，它会自动调用webpack进行打包操作，然后在本地部署一台文件服务器用于测试打包结果。
使用该工具的好处是: 源代码发生变动, 会再次自动打包, 自动部署，自动更新浏览器, 同时打包文件只存储在内存, 比磁盘速度要快。

3.2 安装

全局安装一次：npm i webpack-dev-server -g
每个项目本地安装：npm i webpack-dev-server -D

3.3 启动

脚本：
1
$ webpack-dev-server --contentBase src --open --port 8888
- –contentBase 指定托管根目录
- –open 自动打开浏览器
- –port 指定服务端口
- –host 指定ip，默认127.0.0.1(localhost)
webpack-dev-server打包后的文件直接存储在内存中, 不会进行磁盘读写, 所以非常快

3.4 使用配置文件启动

如果觉得运行命令较长, 参数较多, 写起来较麻烦, 也不便于记忆, 那么可以记录在配置文件中

方式1

找到在package.json描述文件, 找到scripts配置项, 把启动命令配置进去, 并给命令起个名字
然后运行npm run 名称执行相关命令

1
2
3

"scripts": {
    "dev": "webpack-dev-server --contentBase src --open --port 8888 -d"
}

方式2

在webpack-config.js配置文件中添加配置, 然后运行命令: webpack-dev-server

module.exports = {
    devServer: {
        contentBase: 'src'
        open: true,
        port: 8888
    }
}