webpack-搭建Vue

webpack-搭建Vue

  • webpack搭建vue
    • 安装
    • 安装babel
    • 设置规则
    • .babelrc文件
    • 入口文件
    • 配置vue-loader插件
    • 入口文件main.js的内容
    • 使用-组件
    • 组件内容
    • 多文件打包
      • 入口---entry
      • 出口---output
      • 插件配置---plugins

webpack搭建vue

安装

  • vue vue必须
  • vue-loader 处理.vue文件
  • vue-style.loader 处理vue style样式
  • vue-template-compiler 编译模板文件
  • vue-hot-reload-api热更新

安装babel

  • babel 是新一代 JavaScript 语法的编译器 。

  • 可以让我们放心地使用大部分 JavaScript 新的标准语法,代码会通过编译,生成兼容绝大多数主流浏览器的代码 。

  • 在项目工程脚手架中,一般会使用 .babelrc 文件,来配置一些基本参数,配合 webpack 进行打包压缩 。

  • @babel es6转es5

  • babel-loader@7 处理babel指定版本

  • @babel/core 核心

  • @babel/plugin-transform-runtime 按需加载

  • @babel/preset-env 运行环境

  • babel-runtime

  • @babel-polyfill es6转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"
		 }),
}

你可能感兴趣的:(webpack,项目,工作)