本文基于webpack2.x介绍基于webpack的vue开发环境搭建
请恕本文无耻的省略了vue的知识点讲解
webpack是什么
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
点击这里 前往官网
点击这里 前往官方中文站
下面一个是最近发现的webpack2中文文档，非常详细，感谢作者！
http://www.css88.com/doc/webpack2/ 前往webpack2详细介绍(非常感谢作者的翻译)
安装webpack
由于webpack是一个基于node.js的项目，所以首先需要确保你的电脑里面已经安装了node.js，以及npm
为了丝滑的安装npm包，请安装npm的淘宝源
npm config set registry https://registry.npm.taobao.org
全局安装
npm i webpack@2 -g
验证安装
webpack -v
2.3.2
当然，我们都应该将webpack安装到当前项目的依赖中，此时就可以使用项目的本地版本webpack，保证项目迁移时使用的是你期望的版本
项目初始化
# 新建一个目录webpack2
mkdir webpack2
cd webpack2
# 初始化一个package.json文件
npm init
# 一路回车即可
# 安装webpack依赖到当前项目中
npm i webpack -S
vue目录结构初始化
webpack2 项目目录
|--dist 编译打包生成的文件存放的目录
|--node_modules npm包存放的目录，自动生成
|--src vue应用的源码存放目录
|--|---pages vue其它组件的存放目录
|--|---css 应用的css目录
|--|---|---app.css 应用的主css文件
|--|---images 图片目录
|--|---main.js vue应用的入口js
|--|---App.vue vue应用的根组件
|--.babelrc babel配置文件
|--index.html vue应用的骨架html
|--package.json npm配置文件
|--webpack.config.js webpack配置文件
npm安装vue全家桶
npm i vue vue-router vuex -S
文件源码之 index.html
vue build by webpack2.
文件源码之 src/main.js
import Vue from 'vue'
import App from './App.vue'
// 引用自定义的css
// import 'src/css/app.css'
import './css/app.css'
new Vue({
el: '#app',
render: h => h(App)
})
文件源码之 src/App.vue
{{ msg }}
{{ tips }}
文件源码之 src/css/app.css
.title {
color: red;
}
h1, h2 {
font-weight: 800;
}
/* 这里有张图片，自行随意下载之后放在"src/images"目录下 */
.fengjing {
height: 140px;
background: url(../images/fengjing.jpeg) center 0 no-repeat transparent;
width: 300px;
}
webpack的配置
命令行输入webpack直接回车，webpack会自动搜索当前目录下的webpack.config.js文件，按照配置文件运行
入口(Entry)
入口告诉webpack从哪里读取依赖关系并打包，在vue的应用中一般是位于项目目录下的src目录下的main.js文件
先看一个简单的例子
// 入口文件main.js
module.exports = {
entry: {
main: './src/main.js'
}
}
以上是单入口的定义方法，下面介绍下多入口，其实就是并排接着加
// 多入口，app(应用主入口),vendors(公共库)
module.exports = {
entry: {
app: './src/main.js',
vendors: './src/vendors.js'
}
}
OK，介绍完了入口，接下来介绍输出(出口)
输出(Output)
有了上面的入口之后，我们就该告诉webpack在哪里存放打包后的文件
还是来个例子吧
module.exports = {
output: {
// 打包输出的目录，这里是绝对路径，必选设置项
path: path.resolve(__dirname, './dist'),
// 资源基础路径
publicPath: '/dist/',
// 打包输出的文件名
filename: 'build.js'
}
}
基于上面的配置
-
output.path指定了打包输出的目录，这是个必须设置的绝对路径 -
output.filename指定了打包生成的文件名 -
output.publicPath则是用于指定资源基础路径，当你的应用中的css包含图片的时候，这将非常有用
output.filename也可以设置为[name].js，动态对应入口的定义
例如：
module.exports = {
entry: {
app: './src/main.js'
},
output: {
// 打包输出的目录，这里是绝对路径，必选设置项
path: path.resolve(__dirname, './dist'),
// 资源基础路径
publicPath: '/dist/',
// 打包输出的文件名
filename: '[name].js'
}
}
以上配置将会在dist目录下生成app.js
加载器(Loaders)
loader 是对应用程序中资源文件进行转换。它们是（运行在 Node.js 中的）函数，可以将资源文件作为参数的来源，然后返回新的资源文件。
这里我们希望webpack可以加载vue文件和css文件
首先，需要先在项目中安装对应的loader
npm i vue-loader css-loader vue-template-compiler -S
npm i style-loader -S
接着配置webpack，对每一个vue文件使用vue-loader，对每一个css文件使用css-loader和style-loader
module.exports = {
module: {
rules: [
{
// 这是个正则表达式
test: /\.vue$/,
// 指定loader
loader: 'vue-loader'
},
{
test: /\.css$/,
// 指定多个loader
use: [
'css-loader',
'style-loader'
]
}
]
}
}
下面再介绍下加载js的加载器babel-loader
首先是安装loader并支持ES6的语法
这里有一点需要注意是，我们需要安装7.x的
babel-loader，相见官方文档
npm i babel-core [email protected] babel-preset-es2015 -S
一抹优化
babel生成的代码，可能会用到一些_extend()， classCallCheck() 之类的工具函数，默认情况下，这些工具函数的代码会包含在编译后的文件中。如果存在多个文件，那每个文件都有可能含有一份重复的代码。
babel-runtime插件能够将这些工具函数的代码转换成require语句，避免重复
npm i babel-plugin-transform-runtime -S
为了支持ES6，还需要在项目根目录新建一个.babelrc文件
{
"presets": ["es2015"],
"plugins": ["transform-runtime"],
"comments": false
}
配置加载器
module.exports = {
module: {
rules: [
{
test: /\.js$/,
// 跳过 node_modules 目录
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 缓存结果
cacheDirectory: true
}
}
]
}
}
文件加载器
安装文件加载器url-loader
点击这里查看说明文档
npm i file-loader url-loader -S
配置加载器
module.exports = {
module: {
rules: [
{
// 处理图片文件
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 7186, // inline base64 if <= 7K
name: 'static/images/[name].[ext]'
}
},
{
// 处理字体文件
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 7186, // inline base64 if <= 7K
name: 'static/fonts/[name].[ext]'
}
}
]
}
}
插件(Plugins)
插件目的在于解决 loader 无法实现的其他事
举个最常用的例子：
- 丑化生成的
js代码
配置选项，点击查看
module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
- 提取
css文件到单独的文件
安装提取插件extract-text-webpack-plugin
点击这里查看说明文档
npm i extract-text-webpack-plugin@2 -S
配置如下：
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
// 打包输出的目录，这里是绝对路径，必选设置项
path: path.resolve(__dirname, './dist'),
// 资源基础路径
publicPath: '/dist/',
// 打包输出的文件名
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
/*
use: [
'css-loader',
'style-loader'
]
*/
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?minimize'
})
}
]
},
plugins: [
new ExtractTextPlugin({ filename: 'static/css/app.css', allChunks: true })
]
}
将会生成/dist/static/css/app.css，此时output.publicPath将会发挥作用
- 提取入口的公共模块到单独的文件
配置选项，点击查看
module.exports = {
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks: 3
})
]
}
这里我们是单入口，这个配置可以不加
完整的wepack配置文件
webpack.config.js
- 2017.4.8 新增
less支持，先安装less和less的加载器
// 安装完成之后在配置文件中添加对应的加载器规则
npm i less less-loader -S
var path = require('path'),
webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: {
main: './src/main.js'
},
resolve: {
// 自动解析确定的扩展
extensions: ['.js', '.vue'],
// 告诉 webpack 解析模块时应该搜索的目录
modules: [
path.resolve(__dirname, 'src'),
'node_modules'
],
alias: {
'src': path.resolve(__dirname, './src')
}
},
output: {
// 打包输出的目录，这里是绝对路径，必选设置项
path: path.resolve(__dirname, './dist'),
// 资源基础路径
publicPath: '/dist/',
// 打包输出的文件名
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
},
{
test: /\.css$/,
/*
use: [
'css-loader',
'style-loader'
]
*/
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?minimize'
})
},
// 支持less，2017.4.8添加
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: "css-loader?minimize" },
{ loader: "less-loader" }
]
})
},
{
// 处理图片文件
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 7186, // inline base64 if <= 7K
name: 'static/images/[name].[ext]'
}
},
{
// 处理字体文件
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 7186, // inline base64 if <= 7K
name: 'static/fonts/[name].[ext]'
}
}
]
},
plugins: [
// https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new ExtractTextPlugin({ filename: 'static/css/app.css', allChunks: true })
]
}