webpack入门系列教程-安装及建立项目

javascript > webpack
, , ,
0 0 0

简介

  本篇中不介绍概念性的描述，仅给出可以顺利运行的操作方法与相应的代码、配置。关于本文中用到的软件、类库的概念性的介绍，我将在另外几篇文章中，做详细解释。

开发环境安装

安装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
2
nvm current
v9.10.1

安装webpack其相关依赖

1
2
# npm install webpack-cli -g
# npm link webpack

** 如果安装速度较慢，建议将npm数据源切换成taobao的 **

1
# npm config set registry http://registry.npm.taobao.org

建立webpack“项目”

  严格来说，这并不能叫做一个项目，因为webpack仅仅是一个构建工具集合，我们做的只是用它来对我们的现有项目进行构建而已。

初始化并完善目录结构

1
2
3
# mkdir project
# cd project
# npm init

  执行npm init后，将出现对话流程，按照提示，输入你想生成的信息。执行完成后，将会在project目录下，生成用于运行的package.json文件，文件内是项目的描述信息（你刚刚输入的信息）。
  接下来将目录及文件结构补全为下面的形式：

  其中app目录为你的源码目录，其中index.js文件是入口文件，lib.js是你的模块文件。webpack.config.js是webpack的配置文件。

编辑文件

  编辑目录下的各个文件，用来测试webpack打包。

** 模块文件lib.js **:

1
2
3
4
5
6
function test() {
    return "Hello world";
}

/** 导出这个对象 */
module.exports = test;

** 入口文件index.js **:

1
2
3
4
var 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
21
var 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，可以直接用浏览器打开查看效果。