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'
},
