快速配置webpack+vue项目

第一步：初始化项目
　　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配置完成后为

快速配置webpack+vue项目

第二步：安装各种依赖；

* 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

<template>
<div class="app">
{{msg}}
</div>
</template>
<script>
export default {
data(){
return {
msg:'aaaaaaa'
}
}
}
</script>

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 magic
new VueLoaderPlugin()
],
mode: 'development' ,// 设置mode
module: {
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

　　项目目录如下

快速配置webpack+vue项目

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <section id="app">
        
    </section>
</body>
<script src="./dist/build.js"></script>
</html>

第四步：在浏览器中浏览页面
1.全局安装webpack-dev-server

npm install -g webpack-dev-server

2.在根目录cmd中输入webpack-dev-server，即可启动热重载服务
　　在浏览器输入 http://localhost:8080/ 查看页面
　　这时修改页面的代码，不用刷新浏览器直接更改

注意
1.webpack打包时，如果出现

快速配置webpack+vue项目
一定要配置 webpack-cli的依赖

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

快速配置webpack+vue项目
解决：官方默认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自动打包的时候,出现
快速配置webpack+vue项目

分析

. 参考官方文档 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 magic
new VueLoaderPlugin()
],
module : {
...
}
}

秒客网

快速配置webpack+vue项目

相关文章