webpack 实现 vue 配置

vue是目前炙手可热的框架之一，虽然官方提供了vue-cli的客户端直接操作，但是作为开发者还是有必要了解下vue是如何在webpack中实现。废话就不在多说，就按照下面的步骤一步一步实现吧！！！

1、webpack的基本环境(记住一定要安装node)

npm install webpack webpack-cli webpack-dev-server -D   //webpack的基本三套件

 创建入口 index.html ，webpack.config.js和app.js 文件

//webpack.config.js
const path = require('path');
module.exports = {
    entry:['./app.js'], //app.js可任意写入
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'bundle.js'
    },
    devServer:{
        port: 9091
    }
}

//package.json
"scripits":{
    "dev":"webpack-dev-server --config webpack.config.js --mode development",
}

//index.html
<script src="./bundle.js"></script>

执行 npm run dev 即可run服务

2、上一步实现webpack的基础，下一步支持 webpack支持vue(创建app.js, app.vue文件)

npm  install vue vue-loader vue-template-compiler vue-style-loader --save

修改webpack.config.js配置

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/pligun');
module.exports = {
     module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
     },
     resolve:{
        alias:{
            'vue$':'vue/dist/vue.esm.js',
            '@': path.resolve(__dirname, './src') 
        }     },
     plugins:[
        new VueLoaderPlugin()
     ]
}

//app.js
import Vue from 'vue';
import App from './app.vue';

new Vue({
    render:h=>h(App)
}).$mount('#app');

//app.vue
<template>
    <div>
        <h3>{{message}}</h3>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                 message:'welcome use webpack + vue !'
            }
         }
     }
</script>

//index.html
 .....
 <div id="app"></div>
 ....

这样就实现了webpack对vue的支持

3、webpack对css和图片文件的支持

npm install style-loader css-loader url-loader file-loader --save

//webpack.config.js
module.exports = {
    .....
    {
        test:/\.css$/,
        loader:'style-loader!css-loader'
    },
    {
        test:/\.(png|jpg|jpeg|gif|svg)/,
        loader:'url-loader'
    },
    {
        test:/\.(eot|woff2?|ttf|svg)$/,
        loader:'url-loader',
    }
    .....
}

这样就能愉快的写css了
4、babel 编译 ES6

npm install babel-loader @babel/core @babel/preset-env  @babel/plugin-transform-runtime -S

//webpack.config.js
module.exports = {
    ....
    {
        test:/\.js$/,
        loader:'babel-loader',
        query:{
                "presets":["@babel/preset-env"],
                "plugins":["@babel/plugin-transform-runtime"]
        }
        
    }
    ....
}

5、插件使用 (html-webpack-plugin)

npm install html-webpack-plugin -S

const HtmlWbpackPlugin = require('html-webpack-plugin');

module.exports = {
    .....
    plugins:[
        new HtmlWbpackPlugin({
            template:'./index.html',
            filename:'index.html',
            title:'xxxxxxx'
        })
    ]
    .....
}

//配置详解
1.title：生成的HTML模板的title，如果模板中有设置title的名字，则会忽略这里的设置
2.filename：生成的模板文件的名字
3.template：模板来源文件（html文件）
4.inject：引入模板的注入位置，取值有true/false/body/head           
    true：默认值，script标签位于html文件的body底部             
    body:script标签位于html文件的body底部            
    head:script标签位于html文件的head中            
    false:不插入生成的js文件，这个几乎不会用到的
5.favicon：指定页面图标，
6.minify：使用minify会对生成的html文件进行压缩，默认是false。html-webpack-plugin内部集成了html-minifier，因此，还可以对minify进行配置，常用的配置项是：               
 caseSensitive:false,//是否大小写敏感                
 collapseWhitespace:true//是否去除空格               
 removeAttributeQuotes:true// 去掉属性引用              
 removeComments:true,//去注释

6、配置模块解析

resolve:{
    extensions:['.js','.css','.vue']
}

以上就是webpack配置vue的部分，学习足够了，其他的未完待续、、、