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'

},