文件目录

首先我们需要创建要给src文件夹作为我们源代码的资源目录
我们需要创建一个webpack.config.js作为webpack打包的解析文件

准备工作

为了能够使用vue中的各种配置我们需要安装vue以及解析`.vue`文件的loader如图所示

安装`webpack、webpack-cli`以运行webpack命令

安装各种loader

配置webpack.config.js

webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')
module.exports ={
    //webpack入口文件
    entry:'./src/main.js',
    //输出路径
    output:{
        filename:'built.js',
        path:resolve(__dirname,'dist/js'),
    },
    //配置各种loader
    module:{
        rules:[
            //处理vue的资源为js
            {
                test:/.vue$/,
                use:'vue-loader'
            },
            //处理js资源
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            },
            //处理css预编译资源
            {
                test:/\.sass$/,
                use:['style-loader','css-loader','sass-loader']
            },
        ]
    },
    //插件，增加webpack的功能
    plugins:[
        //将js文件插入到html中
        new HtmlWebpackPlugin({
            template:'./index.html'
        }),
        new VueLoaderPlugin()
    ]

}

package.json

  "scripts": {
    "serve": "webapck --mode=development--watch ",
    "build": "webpack --mode=production"
  },

serve表示在本地开发环境下运行的规则，后面的--watch代表监听代码的变化，当你代码变化时，不需要重新打包，会自动刷新

main.js

import Vue from 'vue'
//进入根节点
import App from './App.vue'


new Vue({
    el:'#app',
    //渲染函数，将根节点App传入进行渲染
    render:h=> h(App),
})

main.js是webpack的入口文件

如果我们还想使用vue-router的功能

第一步

安装vue-router

第二步

在src目录下创建一个router文件夹，在里面的index.js中配置router

第三步

配置router/index.js

import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const router = new VueRouter({
    //配置你的router
})

//暴露router
export default router

在main.js中引入router

import Vue from 'vue'
//进入根节点
import App from './App.vue'
import router from './router'
import router from './router'

new Vue({
    el:'#app',
    //渲染函数，将根节点App传入进行渲染
    render:h=> h(App),
    router
})

总结

在我们日常开发中，可能不需要那么多的插件或loader，那么官方的脚手架可能就会太过沉重，那么懂得如何搭建一个适合自己项目的脚手架是非常重要的，这篇文章记录一下自己学习webpack的小总结，只是一个最简单的脚手架，希望大家多多指正！

webpack学习笔记---搭建一个自己的vue-cli！