vue2+webpack 开发环境配置
前提条件：
1、安装node.js
https://nodejs.org/en/ 下载安装合适的平台
2、安装npm
第一步：初始化项目
新建文件夹 E:\app
推荐vue项目目录结构：
- config 全局变量
- dist 编译后的项目代码
- src 项目源码
- apis api封装
- components Vue组件
- libs js工具类
- router 路由
- index.js 路由对象
- routes.js 路由配置
- store Vuex的store
- modules vuex模块
- types.js type管理
- styles css样式
- views 页面组件
- main.js vue入口文件
- webpack.config Webpack各种环境的配置文件
- package.json
- assets 第三方资源目录
在该目录下 使用 命令工具cmd 初始化
npm对于我们项目的管理，则是通过package.json文件：
npm init
执行npm init之后，会提示你填写一些项目的信息，一直回车默认就好了，或者直接执行 npm init -y 直接跳过询问步骤
第二步：入口文件
在src
目录下建立一个index.html，作为页面的入口文件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body style=""> <!--style=" background:green;"--> <div id="app">{{message}}</div> <!-- Vue模板入口 --> <!--<script src="/dist/main.bundle.js"></script>--> <!--<script src="main.js"></script>--> </body> </html>
在
src下建立一个main.js，作为Vue的入口文件
// import...from的语法是ES6的，需要用到babel，后面再说
// require的语法是Commonjs的，webpack已经实现了，可以直接使用
import Vue from 'Vue';
import Hello from './components/Hello.vue';
new Vue({
el: '#app',
template: '<div><hello></hello></div>',
components: {Hello}
})
3、安装模块
webpack 打包工具
webpack-dev-server 一个轻量的node.js express服务器。
webpack-notifier 桌面通知
babel-core
babel-loader
webpack-merge 用于合并两个配置文件
html-webpack-plugin 插件，这个插件可以创建html文件，并自动将依赖写入html文件中。
express nodejs web服务器
babel-preset-es2015 ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。
也就是说，ES6就是ES2015。 转换为普通JavaScript
extract-text-webpack-plugin 提取css到单独的文件
compression-webpack-plugin 压缩gzip
webpack.optimize.UglifyJsPlugin 压缩js文件，内置插件
webpack.DefinePlugin 定义全局变量，内置插件
webpack.optimize.CommonsChunkPlugin 提取公共依赖，内置插件
webpack-dev-middleware
它是对webpack一个简单的包装，它可以通过连接服务器服务那些从webpack发射出来的文件，它有一下几点好处：
1、不会向硬盘写文件，而是在内存中，注意我们构建项目实际就是向硬盘写文件。
2、当文件改变的时候，这个中间件不会再服务旧的包，你可以直接帅新浏览器就能看到最新的效果，这样你就不必等待构建的时间，所见即所得。
使用命令
webpack-hot-middleware 只配合 webpack-dev-middleware 使用，它能给你提供热加载。
在 web根目录下（E:\app） 使用命令行工具
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev extract-text-webpack-plugin
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev
npm install --save-dev css-loader
npm install --save-dev file-loader
npm install --save-dev json-loader
npm install --save-dev style-loader
npm install --save-dev url-loader
npm install --save-dev copy-webpack-plugin
npm install --save-dev vue-loader vue-style-loader vue-template-compiler vue-html-loader vue-hot-reload-api
npm install --save-dev html-webpack-plugin
npm install --save-dev webpack-merge
npm install --save-dev babel-preset-es2015
npm install --save-dev vue vue-router vuex
npm install --save-dev jquery
npm install --save-dev express webpack-dev-middleware webpack-hot-middleware
npm install --save-dev axios
npm install --save-dev vuex-router-sync
npm isntall --save-dev babel-polyfill
有时候安装报错 重新安装，多试几次 就安装好了 也可能是国内环境，需要使用国外vpn连接
最终package.json 文件
{
"name": "vuetest1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config/dev.js",
"build": "webpack --config webpack.config/pro.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.28.0",
"jquery": "^3.2.1",
"json-loader": "^0.5.4",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"vue": "^2.3.4",
"vue-hot-reload-api": "^2.1.0",
"vue-html": "^0.3.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^12.2.1",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.4",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5",
"webpack-merge": "^4.1.0",
"webpack-notifier": "^1.5.0"
}
}
第三步：编写webpack配置文件
项目根目录下新建文件夹webpack.config 专门用于存放webpack的配置文件
为了让配置文件不同的编译环境中能够复用（例如loaders的配置，不管在开发环境还是生产环境肯定都是一样的），在webpack.confg中首先创建一个base.js文件：
var webpack = require('webpack');
const path = require('path');
const root = path.resolve(__dirname, '..'); // 项目的根目录绝对路径
var WebpackNotifierPlugin = require('webpack-notifier');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//entry: path.join(root, 'src/main.js'), // 入口文件路径
entry: {
main: [
path.join(root,'src/main.js')
],
vendors: ['Vue', 'VueRouter', 'jquery','Bootstrap']
},
output: {
// 打包输出的目录，这里是绝对路径，必选设置项
path: path.join(root, '/dist/'), // 出口目录
// 资源基础路径
publicPath: '/',
filename: '[name].bundle.js' //'[name].[chunkhash:8].js' 出口文件名
},
plugins: [
new WebpackNotifierPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
}),
// 分离第三方应用的插件
new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js' }),
//提取css 到单独的文件里
new ExtractTextPlugin({ filename: 'css/app.css', allChunks: true }),
new HtmlWebpackPlugin({
filename: './index.html',
template: path.join(root, 'src/index.html'),
inject: true
})
],
module: {
loaders: [
{
test: /\.css$/,
// loader: 'style-loader!css-loader'
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?minimize'
})
},
{
test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.woff2$|\.ttf$|\.eot$/,
loader: 'url-loader'
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'vue-html-loader'
},
]
},
resolve: {
// 告诉 webpack 解析模块时应该搜索的目录
//modules: [
// path.join(__dirname, 'App'),
// 'node_modules'
//],
// 自动补全的扩展名
//extensions: ['', '.js', '.vue'],
alias: {
'Vue': path.join(root, 'assets/vue/vue-2.3.3/vue.js'),
'VueRouter': path.join(root, 'assets/vue/vue-router-2.5.3/vue-router.js'),
'jquery': path.join(root, 'assets/scripts/jquery-1.12.4.min.js'),
'Bootstrap': path.join(root, 'assets/bootstrap/bootstrap-3.3.7/js/bootstrap.min.js'),
}
},
}
2、在webpack.confg创建dev.js文件：
使用webpack dev server，开启一个小型服务器，不需要再手动打开index.html进行调试了
热替换配置，每次改动文件不会再整个页面都刷新
使用HtmlWebpackPlugin，实现js入口文件自动注入
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseConfig = require('./base.js')
const root = path.resolve(__dirname, '..')
module.exports = merge(baseConfig, {
entry: [
'webpack/hot/dev-server', // 热替换处理入口文件
//path.resolve(__dirname, '../src/main.js'),//path.join(__dirname, '/src/main.js')
path.join(root, 'src/main.js')
],
devServer: {
// historyApiFallback: true, // 404的页面会自动跳转到/页面
// inline: true, // 文件改变自动刷新页面
// progress: true, // 显示编译进度
// colors: true, // 使用颜色输出
// hot:false,
port: 3000, // 服务器端口
},
devtool: 'inline-source-map', // 用于标记编译后的文件与编译前的文件对应位置，便于调试
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template:path.join(root, 'src/index.html'),//path.resolve(__dirname, '../src/index.html'), // 模板文件 //path.join(__dirname,'/src/index.html'), //
inject: 'body' // js的script注入到body底部
})
]
})
修改package.json中的webpack运行脚本为：
"dev": "webpack-dev-server --config webpack.config/dev.js"
package.json文件中的具体配置
3、对于生产环境，通常需要对编译出来的文件进行压缩处理，提取公共模块等等，就需要专门提供一个配置文件
添加webpack.config/pro.js文件，把生产环境用不到的删掉，比如webpack-dev-server、webpack-hot-replacement
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseConfig = require('./base')
const root = path.resolve(__dirname, '..')
module.exports = merge(baseConfig, {
plugins: [
new HtmlWebpackPlugin({
template: path.join(root, 'src/index.html'), // 模板文件
inject: 'body' // js的script注入到body底部
})
]
})
在package.json中添加运行脚本："build": "webpack --config webpack.config/pro.js"
项目根目录运行下面的命令cmd，开启开发服务器：
npm run dev
运行下面命令 ，可以在dist文件夹中看到打包好的文件
npm run build
错误解决：
1、执行npm run dev 浏览器错误如下
解决浏览器错误 不能简析 import语句的错误
Uncaught SyntaxError: Unexpected token import
解决方法：
安装模块 npm install --save-dev babel-preset-es2015
使用方法 配置文件里面 使用
And then setup babel-loader to use it:
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
query: {
presets: ['es2015']
}
},
{
test: /\.vue$/,
loader: 'vue'
}
]
},
vue: {
loaders: {
js: 'babel'
}
}
}
2、npm run dev 后，报错如下
在'.... vue-loader-demo'中无法解析'vue'
ERROR in ./main.js
Module not found: Error: Can't resolve 'vue' in
'....vue-loader-demo'
@./main.js 1:0-22
@multi
./~/_webpack-dev-server@2.4.5@webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server
./main.js
webpack:Failed to compile.
解决方法：npm isntall vue --save-dev
3、ie 11 报错 SCRIPT1002 Error 不支持 ES6语法 的箭头函数
但是 开发的时候 还是不支持 ie11 在谷歌浏览器可以显示
这个可能是
并不是webpack配置问题。也不是babel没编译。
这个锅其实是 webpack-dev-server的问题。它里面通过socket给浏览器的代码有 部分 es6的代码 如 const 这些。然后这种东西ie11以下并不认识
编译后 在可以在ie里正常显示
安装
解决方法：npm isntall --save-dev babel-polyfill
在main.js 开头 import 'babel-polyfill';
webpack 修改配置
entry: {
main: ["babel-polyfill","./src/main"],
vendors: './src/vendors'
},
vue2+webpack 开发环境配置的更多相关文章
- webpack开发环境配置和生产环境配置
开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...
- react+webpack开发环境配置
react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...
- vue2.0 + npm + webpack 开发===环境配置
cnpm安装:npm install -g cnpm --registry=http://registry.npm.taobao.org 1.安装vue-cli脚手架构建工具cnpm install ...
- VUE开发--环境配置(一)（转）
无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627 https://www.jianshu.com/p/a494417def99?utm_so ...
- 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境
转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...
- 分离Webpack开发环境与生产环境的配置
这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- 【webpack学习笔记】a06-生产环境和开发环境配置
生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间. 而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新. 所以可以分开配置不同的开发环境,然后 ...
- weexapp 开发流程（一）开发环境配置
1.创建项目 weexpack create weexapp 2.安装必要插件 npm i jwt-simple vue-resource vue-router vuex vuex-router-sy ...
- 基于webpack4的react开发环境配置
一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...
随机推荐
- Python如何发布程序
https://blog.csdn.net/wem603947175/article/details/81589729
- Linq to XML 增删改查
Linq to XML同样是对原C#访问XML文件的方法的封装,简化了用xpath进行xml的查询以及增加,修改,删除xml元素的操作.C#访问XML文件的常用类:XmlDocument,XmlEle ...
- LeetCode--496--下一个更大元素I（java）
给定两个没有重复元素的数组 nums1和 nums2 ,其中nums1 是 nums2 的子集.找到 nums1 中每个元素在 nums2 中的下一个比其大的值. nums1 中数字 x 的下一个更大 ...
- 说说secondarynamenode作用和配置
说说secondarynamenode作用 http://my.oschina.net/u/1464779/blog/289895 说说secondarynamenode的配置 hadoop2.X如何 ...
- Spring Batch 介绍
在企业应用的关键环境中,通常有需要很多应用来来处理大量的应用.这商业操作包括了自动化,并且负责的处理程序来对大量数据进行高效的处理,通常这些程序不需要人工进行干预.这些事件包括有基于时间周期产生的操作 ...
- 55-56 ORM多表查询
多表查询: KEY ====> 通过ORM引擎如何跨表: 正向查询按字段,反向查询按表名小写 模型的创建: from django.db import models # Create yo ...
- Tree Requests CodeForces - 570D (dfs水题)
大意: 给定树, 每个节点有一个字母, 每次询问子树$x$内, 所有深度为$h$的结点是否能重排后构成回文. 直接暴力对每个高度建一棵线段树, 查询的时候相当于求子树内异或和, 复杂度$O((n+m) ...
- 3月19 HTML静态网页的制作
HTML :内容(Hyper Text Markup Language,超文本标记语言) <html>---开始标签 <head> 网页上的控制信息 <title> ...
- 将你的Vim 打造成轻巧强大的IDE
Vim和Emacs一个称为神之编辑器一个被称为编辑器之神,固然很是夸张,但也足以说明这两 款软件的优秀和在程序员界的地位.但是它们都已漫长的学习曲线让人望而生畏,阻止了大 多数人进入.作为一名几乎完全 ...
- 码云插件Gitee:Couldn't get the list of Gitee repositories
20:02 Couldn't get the list of Gitee repositories Can't get available repositories Not Found