vue2+webpack 开发环境配置

时间:2024-08-22 14:03:44

前提条件:

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 直接跳过询问步骤

第二步:入口文件

  1. 在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>
  2. 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-serverwebpack-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'

},