webpack + vue最佳实践
之前用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
效果图如下
