从零开始的webpack生活-0x001：webpack初次相逢

时间  2019-11-16
标签 开始 webpack 生活 0x001 初次 相逢 栏目 悠闲生活 繁體版
原文   原文链接

0x001 概述

其实我不知道怎么写，因此决定就一块一块的写点日常配置的过程，根据不一样东西稍微分区一下就行了html

0x002 初始化项目结构

$ mkdir webpack_study
$ cd webpack_study
$ mkdir 0x001-begin
$ cd 0x001-begin

0x003 安装webpack，并检查环境

$ node -v
# 输出
v8.4.0
$ npm -v
# 输出
v5.4.2
$ cnpm -v
# 输出
cnpm@5.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@5.4.1 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@8.4.0 (/usr/local/bin/node)
npminstall@3.1.4 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin x64 16.7.0 
registry=http://registry.npm.taobao.org

$ cnpm install -g webpack
# 输出
Downloading webpack to /usr/local/lib/node_modules/webpack_tmp
...
[webpack@3.8.1] link /usr/local/bin/webpack@ -> /usr/local/lib/node_modules/webpack/bin/webpack.js

$ webpack -v
# 输出
3.8.1

0x004 第一个栗子-最简单的使用方式

这个栗子使用的是命令行打包形式，纯粹用来作测试而已，在正式项目中，咱们的配置将会达到很是复杂的程度虽然命令行依旧能够实现，可是将会带来维护上的和形式上的麻烦，因此咱们一般会采用配置文件的形式。

  1. 编写一个js文件node

    # 0x001-begin/src/index.js
console.log('hello webpack')

  2. 在0x001-begin文件夹下执行命令webpack

    $ cd 0x001-begin
$ webpack ./src/index.js ./dist/index.js
# 控制台输出
Hash: d25cd23c431cf01c6a5b
Version: webpack 3.6.0
Time: 53ms
   Asset    Size  Chunks             Chunk Names
index.js  2.5 kB       0  [emitted]  main
   [0] ./src/index.js 29 bytes {0} [built]

  3. 此时查看0x001-begin能够发现，多了个dist文件夹，文件夹下有一个index.js文件,这个文件就是咱们经过webpack打包以后的文件，打开这个文件，咱们能够发现，里面的代码都不是咱们写的，这是webpack自动生成的，暂时无论，之后再去分析他，在文件末尾找一找即可以发现咱们写的那句话也在里面。git

    ...
/***/ (function(module, exports) {
console.log('hello webpack')
/***/ })
...

  4. 文件引用
    日常咱们在作项目的时候，会将不一样的功能、不一样的类写在不一样的文件，使用的时候互相引用，提高项目的可维护性和可扩展性。github

    # 0x001-begin/user.js
export default function (first_name, second_name) {
    console.log('hello ' + first_name + '-' + second_name)
}
# 0x001-begin/index.js
let getUserName = require('./user')
console.log('hello webpack')
getUserName('hello','webpack')

    在user.js中咱们编写了一个方法并export，而后在index.js中引入并调用，此时查看打包以后的dist/index.js文件能够发现全部的代码都打包进去了。web

    ...
/***/ (function(module, exports, __webpack_require__) {
let getUserName = __webpack_require__(1)
console.log('hello webpack')
getUserName('hello','webpack')
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = (function (first_name, second_name) {
    console.log('hello ' + first_name + '-' + second_name)
});
/***/ })
/******/ ]);
...

  5. 命令格式说明npm

    webpack <entry> [<entry>] <output>
- entry: 入口文件，能够一个也能够多个
- output: 输出文件，能够是

    注意：segmentfault

    • entry能够有多个，可是一个和多个的写法不同,必须以entryname=filename的形式指定。同时不能直接单纯的指定输出的文件名称，好比./dist/index.js，将会报错，能够换成如下方式指定，或者其余相似方式。
webpack index1=./src/index.js index2=./src/index2.js ./dist/[name].js
```
- `entry`文件名为`index.js`的时候能够省略，将会自动在指定文件夹下寻找该文件。

0x005-使用配置文件

如今开始使用配置文件的形式来配置 webpack吧！

  1. 最简单的配置文件api

    # 0x001-begin/webpack.config.js
var path       = require('path')
module.exports = {
    entry : './src/index.js',
    output: {
        path    : path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    }
}

  2. 执行命令浏览器

    $ webpack
# 输出
Hash: 731e5b2dd5c8e29150e0
Version: webpack 3.6.0
Time: 59ms
   Asset     Size  Chunks             Chunk Names
index.js  2.94 kB       0  [emitted]  main
   [0] ./src/index.js 96 bytes {0} [built]
   [1] ./src/user.js 112 bytes {0} [built]

    这里实现了咱们以前使用的命令webpack ./src/index.js ./dist/index.js的功能，webpack命令自动读取文件夹下名为webpack.config.js的配置文件。
    注意：

    • 配置文件的名称不必定是webpack.config.js，若是不是该名称，须要显式的指定配置文件名称：webpack --config <path/to/config/file>
    • output的path必须为绝对目录，因此这里使用了nodejs的path模块。

3.监听文件变化
使用 webpack -w 能够监听入口文件变化，固然包括入口文件引入的全部文件的变化，能够利用该特性作到开发网页的时候的浏览器自动刷新

$ webpack -w
# 输出
Webpack is watching the files…

Hash: 731e5b2dd5c8e29150e0
Version: webpack 3.6.0
Time: 64ms
   Asset     Size  Chunks             Chunk Names
index.js  2.94 kB       0  [emitted]  main
   [0] ./src/index.js 96 bytes {0} [built]
   [2] ./src/user.js 112 bytes {0} [built]

注意：

  • 此时webpack执行完并不会退出，而是一直执行并监听文件改变，当文件发生改变，将会触发再次打包，同时控制台将将会输出从新打包以后的信息，除非你在控制台按了CTRL+C 
$ webpack -w
# 输出

Webpack is watching the files…

Hash: 7ec0e3e1cfaf0227c38b
Version: webpack 3.6.0
Time: 66ms
   Asset     Size  Chunks             Chunk Names
index.js  2.94 kB       0  [emitted]  main
   [0] ./src/index.js 96 bytes {0} [built]
   [3] ./src/user.js 113 bytes {0} [built]
Hash: 731e5b2dd5c8e29150e0
Version: webpack 3.6.0
Time: 9ms
   Asset     Size  Chunks             Chunk Names
index.js  2.94 kB       0  [emitted]  main
   [1] ./src/user.js 112 bytes {0} [built]
    + 1 hidden module
^C
  • 修改webpack配置文件以后须要手动重启webpack，新的配置才会生效。
  • 若是打包过程出现错误，好比语法错误，将会在控制台以红色文字显示，而且在你修复以后会再次打包。

clipboard.png

0x006 详解entry

entry能够取一下类型的值：

  • string：'index.js'
  • array：['index1.js','index2.js']
  • object：{index:'index1.js',index2:'index2.js'}
  • function：function(){return 'index1.js'}

具体配置能够查看webpack关于entry的章节

0x007 详解output

当只有一个entry时，能够直接指定output.filename，可是有多个entry时不能直接指定，不然将会报错

ERROR in chunk *** [entry]
***
Conflict: Multiple assets emit to the same filename ***

须要指定其余方式

  • [name].js：使用entry名字
  • [id].js：使用chunk id
  • [hash].js：使用哈希
  • [chunkhash].js：使用生成的文件的哈希（推荐）

固然，以上能够结合来用，推荐使用[name].[chunkhash].js，既能知道是哪一个entry，也能让文件没有修改时候保持文件名不变，让用户在网站更新后访问时不须要从新获取该文件，直接从缓存读取文件
还有许多其余的配置，暂时使用不到，具体配置能够查看webpack关于output的章节

0x008 webpack指令说明

  • webpack：根据webpack.config.js打包，若是没有该文件将会报错
  • webpack --config <path/to/config/file>：根据指定的配置文件打包，若是没有该文件将报错
  • webpack -w：根据指定默认配置文件打包，并监听文件变化，在文件变化后自动打包
  • webpack -p：打包的时候对js混淆压缩

其余更多指令说明，查看webpack关于CLI的章节

0x009 资源

0x010 文章整理

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程