正文

webpack + vue最佳实践

IP云
IP云V管理员/4 阅读
08/06
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

之前用webpack + vue 做项目一直不是很懂，这次有空梳理下，so，让我们重新开始，我们的目的是：

  • 使用commonJs规范编写面向浏览器端的代码
  • 升级到可以使用ES2015书写规范
  • 使用vue来组织我们的项目代码

资料

  • 一小时包教会 —— webpack 入门指南
  • vue-loader
  • 入门Webpack，看这篇就够了

webpack

常用命令

$ webpack --display-error-details //方便出错时能查阅更详尽的信息$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包$ webpack --watch //监听变动并自动打包$ webpack -p //压缩混淆脚本，这个非常非常重要！$ webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了$ webpack --progress //显示进度

loaders 用于转换应用程序的资源文件，他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置)

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install less -save-dev
npm install less-loader --save-dev

样式独立

npm install extract-text-webpack-plugin --save-dev

config

var ExtractTextPlugin = require("extract-text-webpack-plugin");
plugins: [
new ExtractTextPlugin("[name].css")
]
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("css") },
{ test: /\.less$/, loader: ExtractTextPlugin.extract("css!less") }
]

配置外部模块

有时我们想引入一个库，比如vue，如果用webpack打包的话，生成的bundle会比较大。但是通过如下的配置可以在页面中引入vue，但是在js文件里还是用require的方式声明。

externals: {
// require("jquery") 是引用自外部模块的
// 对应全局变量 jQuery
vue: 'window.Vue'
}

index.js

let Vue = require("vue");

我们看下vue的这个模块在bundle里是怎么表现的。

/*!*****************************!*\
!*** external "window.Vue" ***!
\*****************************/
/***/ function(module, exports) {
module.exports = window.Vue;
/***/ },

ES6

webpack + babel可以我们书写ES6代码规范的js了。但是需要加入一些babel转换包

npm install babel-loader babel-core babel-preset-es2015 --save-dev

config

module: {
//加载器配置
loaders: [
{ test: /\.js$/, loader: "babel",query: {presets: ['es2015']} }
]
},

babel

.babelrc : 该文件用来设置转码规则和插件

{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}

babel-preset-es2015 : 2015转码规则
babel-preset-stage-0/1/2/3 : ES7不同阶段语法提案的转码规则（共有4个阶段）
babel-core : API转换核心文件
babel-plugin-transform-runtime : 语法转换
babel-polyfill : api polyfill

Vue

使用vue + webpack来整合项目。这里需要使用vue-loader，由于版本问题，vue version1.x请使用^8.0.0的版本来转换。

这里有一份package.json 的 devDependencies，亲测ok

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack --watch -d",
"publish": "webpack -d -p --progress"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-runtime": "^5.8.0",
"css-loader": "^0.23.0",
"extract-text-webpack-plugin": "^1.0.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.0.0",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.2"
}
}

webpack.config.js

var webpack = require('webpack');
var vue = require('vue-loader')
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports = {
//插件项
plugins: [
new ExtractTextPlugin("[name].css")
],
//页面入口文件配置
entry: {
index : './src/index.js'
},
//入口文件输出配置
output: {
path: './dist/',
filename: '[name].js'
},
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("css") },
{ test: /\.less$/, loader: ExtractTextPlugin.extract("css!less") },
{ test: /\.js$/, loader: "babel",query: {presets: ['es2015']},exclude: /node_modules/ },
{ test: /\.vue$/, loader: 'vue'}
]
},
vue : {
loaders: {
css: ExtractTextPlugin.extract("css"),
less: ExtractTextPlugin.extract("css!less")
},
autoprefixer: { browsers: ["ios_saf >= 7", "android >= 4"] }
},
externals: {
vue: "window.Vue"
}
};

目录结构

src
|____index.css
|____index.js
|____vue-mods
|____index.js
|____index.less
|____index.vue

src/index.js

import "./index.css";
import Vue from "vue";
import App from "./vue-mods/index.vue";
addEventListener('DOMContentLoaded', function () {
new Vue(App).$mount("app");
});
// moduleA.say();

src/vue-mods/index.vue

<style lang="less" src="./index.less"></style>
<template>
<div class="wrap">
{{msg}}
</div>
</template>
<script src="./index.js"></script>

src/vue-mods/index.js

export default {
data () {
return {
msg: 'Hello from Component B!'
}
}
}

执行 npm run build 可以看到 dist 目录

dist
|____index.css
|____index.css.map
|____index.js
|____index.js.map

效果图如下