vue依赖webpack的环境配置(一)
2017-08-20 22:20
609 查看
创建项目
安装webpack、webpack-dev-server以及相关loader
webpack-merge:开发环境和生产环节的webpaak配置文件的配置合并
css-loader:编译写入css
style-loader:把编译后的css整合进html
file-loader:编译写入文件,默认情况下生成文件的文件名是文件名与MD5哈希值的组合
vue:vue主程序
vue-laoder:编译写入.vue文件
vue-html-loader:编译vue的template部分
vue-style-loader:编译vue的样式部分
vue-hot-reload-api:webpack对vue实现热替换
babel-core:ES2015编译核心
babel-loader:编译写入ES2015文档
babel-preset-es2015:ES2015语法
babel-preset-stage-0:开启测试功能
babel-runtime:babel执行环境
更多安装方式和loader解释参考文档https://doc.webpack-china.org/guides/getting-started/
新建index.html
index.html
创建/src/mian.js
新建src文件夹,然后在里面创建main.js
配置webpack.configure.js
大多数项目会需要很复杂的设置,这就是为什么 webpack 要支持配置文件。这比在终端(terminal)中输入大量命令要高效的多,所以让我们创建一个取代以上使用 CLI 选项方式的配置文件:
运行
我们在终端下输入命令 webpack
打开浏览器可以看到效果
进一步实现vue的组件化思想
修改index.html
新建hello.vue
在main.js中加入对hello.js的引入
再次webpack一下,我们就可以在浏览器上看到效果
$ mkdir [project name] $ cd [project name] $ npm init
安装webpack、webpack-dev-server以及相关loader
# 安装webpack,webpack-dev-server $ npm install webpack $ npm install webpack-dev-server # 为项目安装其他依赖 $ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D
webpack-merge:开发环境和生产环节的webpaak配置文件的配置合并
css-loader:编译写入css
style-loader:把编译后的css整合进html
file-loader:编译写入文件,默认情况下生成文件的文件名是文件名与MD5哈希值的组合
vue:vue主程序
vue-laoder:编译写入.vue文件
vue-html-loader:编译vue的template部分
vue-style-loader:编译vue的样式部分
vue-hot-reload-api:webpack对vue实现热替换
babel-core:ES2015编译核心
babel-loader:编译写入ES2015文档
babel-preset-es2015:ES2015语法
babel-preset-stage-0:开启测试功能
babel-runtime:babel执行环境
更多安装方式和loader解释参考文档https://doc.webpack-china.org/guides/getting-started/
新建index.html
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{message}}</div> <!--“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录,最终将在浏览器中加载:--> <!--bundle是分发代码--> <script src="dist/bundle.js"></script> </body> </html>
创建/src/mian.js
新建src文件夹,然后在里面创建main.js
//js源文件 import Vue from "vue"; new Vue({ el:'#app', components:{ message:'test' } });
配置webpack.configure.js
大多数项目会需要很复杂的设置,这就是为什么 webpack 要支持配置文件。这比在终端(terminal)中输入大量命令要高效的多,所以让我们创建一个取代以上使用 CLI 选项方式的配置文件:
var path=require('path'); module.exports={ //定义输入文件 entry:'./src/main.js', // 输出文件 output:{ // 文件名 filename:'bundle.js', // 文件地址 path:path.resolve(__dirname,'dist') }, module: { rules: [ //vue转化 { test:/\.vue$/, loader:'vue-loader' }, // css转化 { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, // 图片转化 { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }, { test: /\.(csv|tsv)$/, use: [ 'csv-loader' ] }, { test: /\.xml$/, use: [ 'xml-loader' ] } ] }, resolve: { // Vue v2.x之后NPM Package默认设置只会生成runtime-only 版本,若要使用standalone功能則需如下设置 // 否则会报错:Failed to mount component: template or render function not defined. alias: { vue: 'vue/dist/vue.js' } // extensions: ['', '.js', '.vue'] } };
运行
我们在终端下输入命令 webpack
打开浏览器可以看到效果
进一步实现vue的组件化思想
修改index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>wewew</h1> <!--hello模块--> <hello></hello> </div> <!--<div id="app">{{message}}</div>--> <script src="dist/bundle.js"></script> </body> </html>
新建hello.vue
<template> <strong>{{vueMsg}}</strong> </template> <script> module.exports = { data() { return {vueMsg:'Vue hello world'} } } </script> <style scoped> strong{ background-color: #f00; } </style>
在main.js中加入对hello.js的引入
import helloVue from './../view/hello.vue'; import Vue from "vue"; // var helloVue=require('./../view/hello.vue') new Vue({ el:'#app', components:{ //hello hello:helloVue } });
再次webpack一下,我们就可以在浏览器上看到效果
相关文章推荐
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- webpack+搭建vue开发环境配置(二)
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- 通过vue-cli来学习修改Webpack多环境配置和发布问题
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- VUE 利用webpack 给生产环境和发布环境配置不同的接口地址
- Vue配置开发环境 npm+webpack
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- vue.js webpack环境配置介绍
- vue 多项目 依赖webpack开发共用 配置
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
- vue-cli webpack 开发环境跨域详解
- webpack开发和生产两个环境的配置详解
- 分离Webpack开发环境与生产环境的配置
- React+webpack 的开发环境配置步骤(二)
- VeeValidate 使用笔记(此文章使用环境VUE+webpack)
- vue-cli中的webpack配置详解