webpack-搭建Vue
webpack-搭建Vue
- webpack搭建vue
- 安装
- 安装babel
- 设置规则
- .babelrc文件
- 入口文件
- 配置vue-loader插件
- 入口文件main.js的内容
- 使用-组件
- 组件内容
- 多文件打包
- 入口---entry
- 出口---output
- 插件配置---plugins
webpack搭建vue
安装
vuevue必须vue-loader处理.vue文件vue-style.loader处理vue style样式vue-template-compiler编译模板文件vue-hot-reload-api热更新
安装babel
-
babel是新一代 JavaScript 语法的编译器 。 -
可以让我们放心地使用大部分 JavaScript 新的标准语法，代码会通过编译，生成兼容绝大多数主流浏览器的代码 。
-
在项目工程脚手架中，一般会使用 .babelrc 文件，来配置一些基本参数，配合 webpack 进行打包压缩 。
-
@babeles6转es5 -
babel-loader@7处理babel指定版本 -
@babel/core核心 -
@babel/plugin-transform-runtime按需加载 -
@babel/preset-env运行环境 -
babel-runtime -
@babel-polyfilles6转es5
设置规则
module : {
// 规则
rules : [
// 匹配vue
{
test: /\.vue$/,
loader: 'vue-loader',
options : {
loaders : {
css : [minCssExtractPlugin.loader,'style-loader', 'css-loader'],
less : [minCssExtractPlugin,"css-loader","less-loader"]
}
}
},
]
}
.babelrc文件
{
"presets" : ["@babel/preset-env","@babel/preset-react"],
}
入口文件
// 入口文件index.js
entry : path.resolve(__dirname, '../src/main.js'),
配置vue-loader插件
// 获取vueloader的Plugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 使用
new VueLoaderPlugin();
入口文件main.js的内容
import Vue from 'vue'
import App from './App.vue'
new Vue({
el : "#app",
render : h => h(App)
})
使用-组件
<html>
<head>
<meta charset="utf-8">
<title><% htmlWebpackPlugin.options.title %>title>
head>
<body>
<div id="app">
div>
body>
html>
组件内容
<template>
<div>
<h1>你好vueh1>
<p>{{msg}}p>
div>
template>
<script>
export default {
data(){return {msg:"你好前端"}}
}
script>
<style>
style>
多文件打包
- 使得vue-react共存
入口—entry
- 入口可以是多个入口
entry : {
vue : path.resolve(__dirname,'../src/main.js'),
react : path.resolve(__dirname,'../src/index.js')
}
出口—output
- 出口，对应出口的文件的名字
output:{
// 如果运行可以注释
publicPath:'./'
// 配置根目录 默认是/ 可以配成相对目录./
filename:"[name]-[hash:7].js",
path:path.resolve(__dirname, '../dist')
},
插件配置—plugins
- 可以设置多个html处理插件，设置对应模板的路径
plugins:[
new htmlWebpackPlugin({
// 标题
title: 'vue,我的第一个webpack',
// 可以把css提取出来，使用link引用
minify:true,
// webpack打包时候使用分支模块，默认是main，
chunks: ['vue'],
// 组件地址
template:path.resolve(__dirname, '../public/index.html')
}),
new htmlWebpackPlugin({
title: 'react,我的第一个webpack',
minify:true,
chunks: ['react'],
template:path.resolve(__dirname, '../public/react.html'),
filename: 'react.html'
}),
// 创建一个html处理插件并指定模板文件的位置
new minCssExtractPlugin({
filename: '[name]-[hash:7].css',
chunkFilename: "vue-[name]-[hash].css"
}),
}