webpack如何搭建一个执行.vue文件的环境
我们在项目中使用VUE很多时候都是使用的是cli 直接创建一个基于webpack的脚手架工具
他怎么运行的 我们不关心
但是 如果我想剖析下 他是怎么运行的 webpack众所周知 他是一个打包工具
他的难就难在 去理解 他怎么执行的
现在我就是从零开始 搭建一个可以执行 .vue文件的环境
再开始之前 现在你的电脑上安装npm环境
在桌面上建立一个英文名称的文件件 记住不要起名为 webpack 会和要安装的webpack冲突
你可以起个 demo
进去demo文件夹 打开命令行初始化项目
npm init
一路回车到底 下面 然后才正式开始了 会在demo文件夹下 生成一个 package.json的文件
1.首先我们要安装 webpack
npm install [email protected] --save-dev 我用的是2.3.2版本
如果你不指定后面的版本号 而且你的npm版本 有很高的话 安装的可能是webpack4.0版本
如果你安装之后发现你的版本是 webpack4.0的话 你还要安装一个 webpack-cli 想编译成功的话
npm install webpack-cli --save-dev 前提是你的版本是4.0版本往上的
2.安装 webpack-dev-server
npm install [email protected] --save-dev
webpack-dev-server 这个是一个可以搭建本地服务器的 工具 他的作用很大
3.下面我们需要在 demo文件夹下创建一个webpack.config.js
var path=require('path'); //自带的path模板 不用下载可以直接使用
var ExtractTextPlugin=require('extract-text-webpack-plugin'); // 可以生成其他文件的插件
var VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue编译时候需要的插件
var config={
entry:{
main:'./main' // 入口文件
},
output:{
path:path.join(__dirname,'./dist'), //输入文件所在位置
publicPath:'/dist/', //公共资源所在位置
filename:'main.js' //导出的文件名称
},
module:{
rules:[
{
test:/\.vue$/, //碰见.vue文件使用 vue-loader加载器
loader:'vue-loader',
options:{ //放置一些对其他的语言的处理 比如:css
loaders:{
css:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'vue-style-loader'
})
}
}
},
{
test:/\.js$/, //碰见 .js结尾的 使用babel-loader加载器加载
loader:'babel-loader',
exclude:/node_modules/
}
]
},
plugins:[
new VueLoaderPlugin(),
]
};
module.exports=config;
4.对package.json文件夹进行一些配置
在 scripts中加上下面这句话
"scripts": {
"dev": "webpack-dev-server --open --config webpack.config.js"
}
表示 如果你在命令行中输入 npm run dev会执行下面这个命令
webpack-dev-server --open --config webpack.config.js
这个默认会建立一个 监听8080端口的本地服务器 --config是 指向我们刚刚书写的那个 配置文件
5.当然 你现在启动的话会报错因为很多东西还没有配置好 比如我们demo文件夹下 还没有一个main.js的文件
下面需要我们安装 需要的环境
"babel": "^6.23.0", // 用来解析 es6的语法 转换成低版本的js让一些浏览器认识
"babel-core": "^6.26.3",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^3.3.2",
"extract-text-webpack-plugin": "^2.1.2",
"style-loader": "^1.0.1",
"vue": "^2.6.11",
"vue-hot-reload-api": "^2.3.4",
"vue-loader": "^15.7.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
这上面的除了最底下的俩个我们已经安装了 其他的没错都需要我们安装
其中注意如果你没有制定版本的话 可能有些版本过高 可能出现变异错误 babel 和babel-loader的版本必须一致 比如
babel 6.0 babel-loader 8.0 就会出现编译错误 必须将babel-loader降低到6.0版本才可以
至于安装 还和上面的一样 npm install [email protected] --save-dev 我就不一一书写了
6.创建一个app.vue的文件 经常用脚手架的童鞋可能看见这个就很熟悉了
<template>
<div>{{name}}</div>
</template>
<script>
export default {
data(){
return {
name:'hello world'
}
}
}
</script>
<style scoped>
div{
color:#f00;
font-size:24px;
}
</style>
7.demo文件夹下建立一个 main.js文件 将上面的引进去 并创建vue实例
import Vue from "vue";
import App from "./app.vue"
new Vue({
el:"#app",
render:h=>h(App)
})
8.在demo文件夹 下创建一个 .babelrc 文件用来设置 babel
{
"presets":["es2015"],
"plugins":["transform-runtime"],
"comments":false
}
9.创建一个html文件 上面的 环境配置好了之后 打包生成的main.js文件引进去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
hello world
</div>
</body>
<script src="/dist/main.js"></script>
</html>
最后执行 npm run dev
如果页面出现这个 就说明执行成功了
https://github.com/zhaoyunchong/webpack.git
以上是 webpack如何搭建一个执行.vue文件的环境 的全部内容， 来源链接： utcz.com/z/375021.html
