webpack 4简单创建vue 自用

最新推荐文章于 2024-04-17 22:43:32 发布

wa-monster

最新推荐文章于 2024-04-17 22:43:32 发布

阅读量173

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_40291929/article/details/105106446

版权

pakge.json配置：

{
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.4.2",
    "ts-loader": "^6.2.2",
    "typescript": "^3.8.3",
    "vue-loader": "^15.9.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "vue": "^2.6.11"
  }
}

webpack.config.js 配置

const vlp = require('vue-loader/lib/plugin')
module.exports =  {
  mode:'development',
  entry:{
    index:'./src/index.js'
  },
  output:{
    filename:'index.js',
    path:__dirname + '/dist'
  },
  module:{
    rules:[
      {
        test:/\.vue$/,
        loader:'vue-loader'
      },
      {
        test:/\.css$/,
        use:[
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins:[
    new vlp()
  ]
}

webpack.config.js同级新建src 目录，src下新建index.js(webpack.entry)

写入

import Vue from 'vue'
import app from './pages/app.vue'


new Vue({
  el:'#app',
  render:h=> h(app)
})

src目录下新建pages/app.vue

随便写点vue代码

<template>
    <div>
      asdasdas
    </div>
</template>

<script>
export default {
    name:'',
    data() {
        return {

        };
    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
};
</script>

<style scoped >

</style>

webpack.config.js同级写一个html文件，写入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
</head>
<body>
  <div id="app"></div>
  <script src="./dist/index.js"></script>
</body>
</html>

最后，运行 npx webpack 进行打包编译，编译好后打开index.html

如图所示

本教程只适用于 j教程里面所用版本的vue和webpack和各种loader,版本可以前后有一点更新或落后但是差太多可能会出问题，（落后就该挨打）

wa-monster

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 4简单创建vue 自用

pakge.json配置： { "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license...
复制链接

扫一扫