简介
本篇中不介绍概念性的描述,仅给出可以顺利运行的操作方法与相应的代码、配置。关于本文中用到的软件、类库的概念性的介绍,我将在另外几篇文章中,做详细解释。
开发环境安装
安装nvm
本系列文章利用nvm
对node
进行版本管理
wget
1 | # wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash |
curl
1 | # curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash |
nvm: command not found
的解决方法
1 | # source ~/.bashrc |
安装最新稳定版本node
1 | # nvm install stable |
如果下载速度慢,建议将nvm
数据源切换成taobao的 1
2# NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
# nvm install stable
查看当前的node版本
1 | nvm current |
安装webpack
其相关依赖
1 | # npm install webpack-cli -g |
如果安装速度较慢,建议将npm
数据源切换成taobao的 1
# npm config set registry http://registry.npm.taobao.org
建立webpack
“项目”
严格来说,这并不能叫做一个项目,因为webpack
仅仅是一个构建工具集合,我们做的只是用它来对我们的现有项目进行构建而已。
初始化并完善目录结构
1 | # mkdir project |
执行npm init
后,将出现对话流程,按照提示,输入你想生成的信息。执行完成后,将会在project
目录下,生成用于运行的package.json
文件,文件内是项目的描述信息(你刚刚输入的信息)。
接下来将目录及文件结构补全为下面的形式:
- app
- index.js
- lib.js
- package.json
- webpack.config.js
其中app
目录为你的源码目录,其中index.js
文件是入口文件,lib.js
是你的模块文件。webpack.config.js
是webpack的配置文件。
编辑文件
编辑目录下的各个文件,用来测试webpack
打包。
模块文件lib.js
:1
2
3
4
5
6function test() {
return "Hello world";
}
/** 导出这个对象 */
module.exports = test;
入口文件index.js
:1
2
3
4var myLib = require('./lib');
var dom = document.querySelector("body");
dom.innerHTML = '<h1>' + myLib() + '</h1>';
webpack配置文件webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21var path = require('path');
var hwp = require('html-webpack-plugin')
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
mode: 'development',
entry: APP_PATH,
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
plugins: [
new hwp({
title: 'hello world app'
})
]
}
安装相关依赖
进入主目录~/project
1
2# cd ~/project
# npm install html-webpack-plugin --save-dev
webpack打包
运行打包命令时,需要在project
目录下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16# cd /project
# webpack
Hash: 4d0cdffd153633cd3a5a
Version: webpack 4.4.1
Time: 670ms
Built at: 2018-4-25 21:23:06
Asset Size Chunks Chunk Names
bundle.js 3.27 KiB main [emitted] main
index.html 186 bytes [emitted]
Entrypoint main = bundle.js
[./app/index.js] 115 bytes {main} [built]
[./app/lib.js] 67 bytes {main} [built]
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
4 modules
打包完成后,将会自动建立build
目录,其中为打包好的bundle.js
,以及由html-webpack-plugin
插件自动为我们生成的index.html
。在index.html
中自动引用的打包好的bundle.js
,可以直接用浏览器打开查看效果。