webpack 是一个现代 JavaScript 应用程序的静态模块打包器, vue 是一套用于构建用户界面的渐进式 JavaScript 框架. 本文就来为大家介绍 webpack+vue 的项目实践, 希望对大家有一定的帮助.
webpack + vue 项目实践:
使用 commonJs 规范编写面向浏览器端的代码
升级到可以使用 ES2015 书写规范
使用 vue 来组织我们的项目代码
webpack
常用命令
- $ webpack --display-error-details // 方便出错时能查阅更详尽的信息
- $ webpack --config XXX.JS // 使用另一份配置文件 (比如 webpack.config2.JS) 来打包
- $ webpack --watch // 监听变动并自动打包
- $ webpack -p // 压缩混淆脚本, 这个非常非常重要!
- $ webpack -d // 生成 map 映射文件, 告知哪些模块被最终打包到哪里了
- $ webpack --progress // 显示进度
loaders 用于转换应用程序的资源文件, 他们是运行在 Node.JS 下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置)
- 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 = Windows.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
- {
- "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 src="./index.less"></style>
- <template>
- <div>
- {{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
效果图如下
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/vue-js/16958.html