第一步：初始化项目

　　1.npm init

　　2.  

package name: (webpack+vue) webpackvue　　 　version: (1.0.0)　　　 description: this is webpack Vue demo            entry point: (webpack.config.js) index.js　　　 test command:　　　 git repository:　　　 keywords:　　    author: alexia　　     license: (ISC)　　　 About to write to D:\demo\webpack\webpack+vue\package.json:　　　　{　　　　"name": "webpackvue",　　　　"version": "1.0.0",　　　　"description": "this is webpack Vue demo",　　　　"main": "index.js",　　　　"dependencies": {},　　　　"devDependencies": {},　　　　"scripts": {　　　　"test": "echo \"Error: no test specified\" && exit 1"　　　　},　　　　"author": "alexia",　　　　"license": "ISC"　　　　}

 

package.json配置完成后为

第二步：安装各种依赖；

* npm install --save vue 安装vue2.0* npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 //安装webpack以及webpack测试服务器，* npm install --save-dev babel-core babel-loader babel-preset-es2015 * npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件 * npm install --save-dev css-loader file-loader 用来解析css

 

第三步：编写页面

1.新建目录src，里面新建App.vue

 

2.在src目录下新建main.js

/* 引入vue和主页 */import Vue from 'vue'import App from './App.vue'/* 实例化一个vue */new Vue({el: '#app',render: h => h(App)})

 

3.配置webpack.config.js

/* 引入操作路径模块和webpack */var path = require('path');var webpack = require('webpack');const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {/* 输入文件 */entry: './src/main.js',output: {/* 输出目录，没有则新建 */path: path.resolve(__dirname, './dist'),/* 静态目录，可以直接从这里取文件 */publicPath: '/dist/',/* 文件名 */filename: 'build.js'},plugins: [// make sure to include the plugin for the magicnew VueLoaderPlugin()],mode: 'development' ,// 设置modemodule: {rules: [/* 用来解析vue后缀的文件 */{test: /\.vue$/,loader: 'vue-loader'},/* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */{test: /\.js$/,loader: 'babel-loader',/* 排除模块安装目录的文件 */exclude: /node_modules/}]}}

 

4.打包项目

　　在根目录按住shift键同时点击鼠标右键打开powershell命令窗口，输入webpack，这时目录下会多出一个dist文件夹，查看里面会有build.js

　　项目目录如下

5.根目录下新建index.html，引入build.js然后打开

 

 

第四步：在浏览器中浏览页面

1.全局安装webpack-dev-server

npm install -g webpack-dev-server

2.在根目录cmd中输入webpack-dev-server，即可启动热重载服务

　　在浏览器输入 http://localhost:8080/ 查看页面

　　这时修改页面的代码，不用刷新浏览器直接更改

 

 

注意

1.webpack打包时，如果出现

一定要配置 webpack-cli的依赖

2.在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误

解决：官方默认babel-loader | babel 对应的版本需要一致: 即babel-loader需要搭配最新版本babel

　　a.回退低版本

　　npm install -D babel-loader@7 babel-core babel-preset-env

　　b.更新到最高版本:

　　npm install -D babel-loader @babel/core @babel/preset-env webpack

3.在配置webpack.config.js自动打包的时候,出现

分析

. 参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required

. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的

解决：. 在webpack.config.js中加入

const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {devtool: "sourcemap",entry: './js/entry.js', // 入口文件output: {filename: 'bundle.js' // 打包出来的wenjian},plugins: [// make sure to include the plugin for the magicnew VueLoaderPlugin()],module : {...}}