本文将介绍从零开始搭建vue的打包环境，重点介绍webpack，vue的知识点请恕本文无耻的省略了
OK，开始！
什么是webpack
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
点击这里 前往官网
点击这里 前往官方中文站
本文基于webpack 1.14.x的版本
安装
由于webpack是一个基于node的项目，所以首先需要确保你的电脑里面已经安装了node.js，以及npm。
全局安装：
npm install webpack@1.14 -g
安装成功之后，在命令行输入webpack -h即可查看当前安装的版本信息，以及可以使用的指令
[root@localhost ~]# webpack -v
1.14.0
当然，我们都应该将webpack安装到当前项目的依赖中，此时就可以使用项目的本地版本webpack
# 确保已经进入项目目录
# 初始化一个package.json文件
npm init
# 一路回车即可
# 安装webpack依赖，这里我们安装1.14.x的版本
npm install webpack@1.14 --save-dev
# 简写
npm install webpack@1.14 -S
# –save：模块名将被添加到dependencies，可以简化为参数-S。
# –save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。
安装好之后我们的package.json应该是这样的：
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^1.14.0"
}
}
初始化vue的项目目录结构
webpack 项目目录
|--dist 编译打包生成的文件存放的目录
|--node_modules npm包存放的目录，自动生成
|--src vue应用的源码存放目录
|--|---pages vue其它组件的存放目录
|--|---main.js vue应用的入口js
|--|---App.vue vue应用的根组件
|--index.html vue应用的骨架html
|--package.json npm配置文件
|--webpack.config.js webpack配置文件
源码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack vue</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/build.js"></script>
</body>
</html>
src/main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
src/App.vue
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg : 'Hello World!'
}
}
}
</script>
利用npm安装vue
npm install vue vue-router vuex -S
安装好之后我们的package.json应该是这样的：
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0",
"vuex": "^2.2.1",
"webpack": "^1.14.0"
}
}
webpack的配置
命令行输入webpack直接回车，webpack会自动搜索当前目录下的webpack.config.js文件，按照配置文件运行
下面是一个简单的webpack配置文件，只处理js
var path = require('path'),
webpack = require('webpack')
module.exports = {
entry: './src/main',
output: {
path: path.join(__dirname, './dist'),
filename: 'js/[name].js',
publicPath: '/dist/'
}
};
简单介绍下配置文件
entry
webpack入口设置
module.exports = {
entry: './src/main'
}
这里定义入口文件，可以单个，可以多个：
module.exports = {
entry: {
app: './app',
index: './index'
}
}
这里的入口文件路径都是相对于webpack.config.js文件的路径，文件后缀.js可以省略
output
打包编译输出设置
module.exports = {
output: {
path: path.join(__dirname, './dist'),
filename: 'js/[name].js',
publicPath: '/dist/'
}
}
output.path
打包编译生成的文件存储路径，这里是绝对路径
output.filename
打包编译生成的文件名，这里[name]会根据入口定义自动生成文件名
例如：
- 单入口
入口定义
module.exports = {
entry: './src/main'
}
生成文件 main.js
- 多入口
入口定义
module.exports = {
entry: {
app: './app',
index: './index'
}
}
生成文件 app.js和index.js
output.publicPath
其它文件生成的路径，例如：css、图片等
loader介绍
Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如VUE、JSX、SASS 或图片。
上配置：
module.exports = {
module: {
loaders: [
{
test: /\.vue$/, // 这里是正则表达式
loader: 'vue' // 这里是对应的loader
},
{
test: /\.css/,
loader: 'style-loader!css-loader'
}
]
}
}
loader怎么来呢，很简单，通过npm直接安装
npm install vue-loader css-loader vue-template-compiler -S
安装好之后我们的package.json应该是这样的：
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^0.26.2",
"vue": "^2.2.1",
"vue-loader": "^11.1.3",
"vue-router": "^2.3.0",
"vue-template-compiler": "^2.2.1",
"vuex": "^2.2.1",
"webpack": "^1.14.0"
}
}
于是，我们的webpack配置文件就长这样了
var path = require('path'),
webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.css/,
loader: 'style!css'
}
]
}
}
注意 这里
output.filename设置的是build.js，对应上面index.html模版中引入的js文件是build.js
添加ES6的支持
如果现在你的项目还没有对ES6的语法支持，那就有点没有逼格了，其实大家都知道这个也很简单，因为我们有伟大的Babel
首先安装loader
npm install babel-core babel-loader babel-preset-es2015 -S
然后修改配置文件
{
test: /\.js$/,
loader: 'babel?cacheDirectory',
exclude: /node_modules/
}
项目根目录下新增babel配置文件.babelrc
{
"presets": ["es2015"],
"comments": false
}
One more thing.
babel 给每个需要的文件注入helper扩展
原文：
babel is injecting helpers into each file and bloating my code!
babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it.
下面的配置通过babel-plugin-transform-runtime插件可以禁用babel向每个文件注入helper
首先是安装babel-plugin-transform-runtime，npm install babel-plugin-transform-runtime -S
babel配置文件.babelrc调整为：
{
"presets": ["es2015"],
"plugins": ["transform-runtime"],
"comments": false
}
OK，打开命令行输入webpack --color --progress就可以见证webpack 的打包了
至此，vue应用就可以正常运行了
网友评论