Vue 与 webpack手动配置

Z时代
2024-01-10
分类：综合

vue

上篇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()
    ]
}