Vue 与 webpack手动配置

上篇webpack入门，将常用重要点过了一下，这篇是手动搭建vue中webpack
相关指令整理

npm init -y
npm i -D webpack webpack-cli
npm i vue -S
mkdir src  cd src touch index.js
touch webpack.config.js
npm i -D html-webpack-plugin  // 编译出html页面
npm i -D webpack-dev-server   //启动webpack服务   8080
npm i -D vue-loader babel-loader vue-style-loader css-loader
npm i -D @babel/core  //   babel-loader @8  要 babel @7
npm i -D vue-template-compiler
npm i -D less less-loader

文件目录
在这里插入图片描述
App.vue

<template>
  <h1 class="h1">你好，世界 <span class="span">!</span></h1>
</template>

<script>
export default {

}
</script>
<style lang="less" scoped>
.h1{
    color:blue;
    .span{
        color: red;
    }
}
</style>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">  // 挂节点

    </div>
</body>
</html>

index.js

import Vue from 'vue'
import App from './app.vue'
new Vue({
    el:"#app",
    render:(h)=>h(App)
})

package.json

{
  "name": "03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.prod.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "vue": "^2.6.10"
  }
}

webpack.config.js与webpack.prod.config.js 只有mode不一样。有插件webpack-Merge可以后期优化。

const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode:'production',// development
    entry:{
        index:'./src/index.js'
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test:/\.js$/,
                loader:'babel-loader'
            },
            {
                test:/\.css$/,
                use:[
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'vue-style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    plugins:[

        new HtmlWebpackPlugin({
            template:"./src/index.html"
        }),
        new VueLoaderPlugin()
    ]

}

在这里插入图片描述

vue-cli3单独配置，新建vue.config.js配置即可

Vue 与 webpack手动配置

收工

猜你喜欢