Fork me on GitHub

webpack从零构建vue项目

frontend/webpack_build_vue_project/banner

看官别急 工作之余更新 预计2018.3.30(乐观的时间,因为自己时间感觉不够用)前完成本博文更新 可文末留言更新建议或打赏

看者可以到自己几个月前搭建的一个小的webapck项目github仓库下简单看搭建过程啦,如果你在webpack项目中留颗星星那就更好了。

本博客因为自己事情忙暂时停,完成的时间待定,望见谅…

webpack是什么

官方描述:At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.

鄙人的翻译:webpack的核心是现代javascript程序的静态模块打包工具。当webpack处理你的应用的时候,它会根据你的应用需要的模块递归的描绘出一个依赖图,然后打包这些模块到指定的一个或者多个文件中。

翻译不妥,还请指出。

webpack核心概念

webpack的核心包括: 入口(entry),出口(output),加载器(loader)和插件(plugin)。

Entry

入口entry指明webpack应该从哪个文件开始解析去构建它内部的依赖图。入口的语法可以分为下面的这些 :

单一的入口

使用方法: entry: string|Array<string>

相关的demo如下 :

1
2
3
4
const config = {
entry: '/path/to/my/entry/file.js'
};
module.exports = config;

多入口(类型入口)

使用方法: entry:{[entryChunkName: string]: string|Array<string>}

相关的demo如下 :

1
2
3
4
5
6
7
const config = {
entry: {
app: '/path/to/app.js',
vendors: '/path/to/vendors.js'
}
};
module.exports = config;

Output

输出点output是告诉webpack它处理后的文件命名和文件应该存放在哪里。

用法

(1) 属性filename是用来告诉webpack输出到的文件

(2) 属性path是确定文件的绝对路径,一般是用path.resolve(__dirname,’directoryName’)

单文件出口

单文件出口就是webpack处理后只输入一个文件,demo如下:

1
2
3
4
5
6
7
const config = {
output: {
filename: 'bundle.js',
path: '/path/to/project/assets'
}
};
module.exports = config;

多文件输出

如果想在多入口文件中输出对应的文件的话,就需要用到webpack带的name属性了,demo如下:

1
2
3
4
5
6
7
8
9
10
{
entry: {
app: '/path/to/app.js',
search: '/path/to/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist' # 一般是存放在dist文件夹下啦
}
}

执行相关的命令行后,就会在dist文件下面看到app.js和search.js文件了。

Loaders

webpack它本身只能够识别javascript文件,那么要webpack来处理除了javascript文件之外的文件,就需要用到loaders了。简单来讲,Loaders能够转换你应用中所有类型的文件到依赖的视图里面。

在webpack的配置中,Loaders需要注意以下的两点:

(1) test属性定义哪种类型的文件应该被转换

(2) use属性指明哪种加载器应该用来转换文件

如下面的demo的rule字段中匹配后缀名为.txt的文件(假设你已经安装了raw-loader) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const path = require('path)

const config = {
entry: '/path/to/file.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'file.name.js'
},
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
}
]
}
}

Plugins

Plugin范围可以从优化和压缩的方法到定义类似环境的变量。英文原话Plugins range from bundle optimization and minification all the way to defining environment-like variables

如果你要使用插件,你需要使用require()方法将它添加到plugins的数组中,然后创建相关的实例。下面以html-webpack-plugin插件为例子(前提是你已经安装了这个插件):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

const config = {
entry: '/path/to/entry/file.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: '/\.txt$/',
use: 'raw-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};

module.exports = config;

webpack项目搭建过程

简单的讲解了webpack的核心概念,那么接下来就使用webpack来搭建项目吧。下面讲解整个的项目搭建的过程。😊

项目的初始化

通过命令行npm init -y的初始化项目,建议在桌面新建文件(因为后面好找啊)还有通过npm init进行项目的初始化(自己可以控制内容)。自己在osx系统上是经过下面的步骤建项目的,如果你使用的电脑是其他系统,有所出入,请留意。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ cd desktop # 进入桌面
$ mkdir projectName && cd cd projectName # 新建目录并进入
$ npm init # 开始初始化项目
package name: as you like # 填写包名称,默认projectName
version: as you like # 项目的版本号,默认1.0.0
description: as you like # 关于项目的描述,默认为空
entry point: as you like # 项目的入口文件,默认是index.js
test command: as you like # 测试命令,默认为空
git repository: relatived git repository that you like # 相关的git仓库,如果有请关联一个,这样好管理。默认为空
keyword: as you like # 项目的关键词,默认为空
author: your name # 项目的作者/发起人,默认为空
license: license you write # 相关的证书,默认是ISC

Is this ok?(yes) # 询问你设置是否确认,确认的话就按回车键。如果放弃请英文输入法输入n,再按下回车键,就放弃更改,回到最初状态了,再执行 npm init

如果你直接执行npm init -y就会直接使用默认状态啦,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ cd desktop
$ mkdir projectName && cd projectName
$ npm init -y
Wrote to /Users/reng/Desktop/demo/package.json:

{
"name": "projectName",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

个人还是比较偏向npm init啦!

有待补充

全栈项目

是什么全栈项目呢?说实在,自己还没想好 😂 看情况写或者不写

有待补充

参考

webpack官网

vue官网

精力有限,未能一次性更新完,忘见谅…

<-- 本文已结束  感谢您阅读 -->
客官,且步,赏一个呗 (@ ~ @)