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

运行结果