webpack4.0+vue2.0的前端工程构建入门

in 前端技术 with 0 comment

CYi9xO.md.jpg

part.1 导语

前端工程化有各种各样组合方式
其中webpack+vue当属热门
虽然通过vue-cli可以完成很多构建任务
但是仍旧不不能满足所有需求
不使用vue-cli来构建工程也是一项基本技能
并且webpack与vue都在不断迭代
网上的很多教程已不具备时效性
所以重新整理一篇博文
使用当前最新的版本来构建一个前端工程

part.2 项目环境

Nodejs:8.11.1
Npm: 5.6.0
Webpack: 4.6.0
Vue: 2.5.16

part.3 初始化项目目录

项目目录截屏:
CYZaS1.png

part.4 安装所需模块

package.json截屏:
CYZwy6.png

part.5 配置文件

webpack.config.js

    const path = require('path'); //获取path模块
    const { VueLoaderPlugin} = require('vue-loader'); //获取vueloader插件
    
    const config = {
        entry:'./src/index.js', //入口js文件
        output:{
            path: path.resolve(__dirname,'dist'),//webpack4.0以后采用resolve来指定输出目录
            filename:'bundle.js'
        },
        module:{
            rules:[
                {
                    test: /\.vue$/,//使用正则表达式匹配以.vue结尾的文件
                    loader: 'vue-loader' //使用vue-loader处理
                }
            ]
        },
        plugins:[
            new VueLoaderPlugin()
        ]
    }
    
    module.exports = config;

在package.json中编写启动webpack的脚本

    "script":{
        "test":"echo \"Error: no test specified\" && exit 1",
        "build":"webpack --open --config webpack.config.js"
    }

part.6 根组件

    <template>
        <div>
            hello{{name}}
        </div>
    </template>
    <script>
        data(){
            return{
            name:'Vue'
            }
        }
    </script>
    <style></style>

part.7 入口文件

index.js

    import Vue from 'vue'; //引入vue
    import App from './app.vue'; //引入根组件
    new Vue({
        el:'#app',
        render:(h)=>h(App)
    });//创建一个vue实例

index.html

    <html>
        <head>
            <title>hello vue</title>
        <head>
        <body>
            <!--根组件挂载点-->
            <div id="app"></div>
            <!--引入打包后的脚本文件-->
            <script src="dist/bundle.js"></script>
        </body>
    </html>

part.8 运行结果

CYZdQx.png

Responses