webpack使用Vue
webpack打包后还是es6的语法，将其转化成es5
1、安装插件（可参考webpack中文档babel模块,babel-preset-es2015与文档不一样）
npm install babel-loader babel-core babel-preset-es2015
2、配置webpack.config.js
const path=require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports= {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js",
publicPath: "dist/"
},
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1400,
name: 'img/[name].[hash:8].[ext]'
},
}
]
},
//这是配置Es6的地方,
//es2015就是es6版本
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
//配置end
{
test: /.vue$/,
use: ['vue-loader']
}
]
},
plugins: [new VueLoaderPlugin()],
resolve: {
//导入的文件去掉后缀，如果有相同的名字的文件后缀不一样，还是带上后缀稳妥
extensions:['.css','.js','.vue'],
//项目导入vue的时候默认去找这个文件路径的vue
alias: {
'vue$': "vue/dist/vue.esm.js"
}
},
}
使用vue
1、安装vue插件
npm install vue --save-dev
//安装vue文件的loader,vue-template-compiler可以编译template
npm install vue-loader vue-template-compiler --save-dev
//在webpack.config.js中配置loader和相应的设置
//获取文件路径
const path=require('path');
//vue-loader高版本需要配置VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports= {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js",
publicPath: "dist/"
},
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1400,
name: 'img/[name].[hash:8].[ext]'
},
}
]
},
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /.vue$/,
use: ['vue-loader']
}
]
},
//在此吧之前的VueLoaderPlugin 加载进来
plugins: [new VueLoaderPlugin()],
resolve: {
//导入的文件去掉后缀
extensions:['.css','.js','.vue'],
//项目导入vue的时候默认去找这个文件路径的vue
alias: {
'vue$': "vue/dist/vue.esm.js"
}
},
}
2、在响应的的main.js中导入引用vue
require("./css/normal.css");
require("./css/special.less");
//配置过去后缀，这里可以去掉后缀（我没去）
import {sub} from "./js/mathUtil.js";
import * as testExport from "./js/testExport.js"
console.log("2+3="+sub(2,3));
console.log("testExport.name"+testExport.name);
const student =new testExport.student();
student.study("你好！");
//这里引入vue插件，此“vue” 路径是在webpack.config.js中设置过
import Vue from "vue"
//这里引入新建的app.vue文件，vue-loader已经配置完成
//app.vue为一个组件
import app from "./vue/app.vue"
new Vue({
el:"#app",
//执行的时候通过<app/>寻找相同的名字的子组件app，将<div id="app">替换成子组件的dom
template:`<app/>`,
//注册子组件
components:{
app
}
})
app.vue
<!--这个template中的<div>开始，会将html中的<div id="app"> 替换掉，具体看上面的Vue实例-->
<template>
<div>
<h2 id="title">{{message}}</h2>
<button :click="btnClick">button</button>
<cpn></cpn>
</div>
</template>
<!--配置子组件，可以再加载子组件-->
<script>
//引入Cpn.vue子组件
import Cpn from "./Cpn.vue";
//导出默认，方便父组件导入
export default {
name: "app",
//注册此组件的子组件
components:{
Cpn
},
//数据，为方法，防止多次调用此组件，数据被重用
data(){
return{
message:"hello,Webpack"
}
},
//方法
methods:{
btnClick(){
}
}
}
</script>
<!--在此可以设此组件的样式-->
<style scoped>
#title{
color:blue;
}
</style>
Cpn.vue
<template>
<div>
<h2 class="h2style">我是标题</h2>
<p>我是内容给</p>
<h2>{{name}}</h2>
</div>
</template>
<script>
export default {
name: "Cpn",
data(){
return {
name:"cpn",
}
}
}
</script>
<style scoped>
.h2style{
color: red;
}
</style>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<button :click="btnClick">按钮</button>
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
package.json
{
"name": "testwebpack",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^4.2.2",
"style-loader": "^1.2.1",
"vue": "^2.6.12",
"webpack": "^4.44.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"file-loader": "^6.0.0",
"less": "^3.12.2",
"less-loader": "^7.0.0",
"url-loader": "^4.1.0",
"vue-loader": "^15.0.0",
"vue-template-compiler": "^2.6.12",
"webpack-cli": "^3.3.12"
},
"description": ""
}
最后执行打包 npm run build
运行结果
