vue webpack所用基础包：
nom install vue vue-loader webpack webpack-cli webpack-dev-server vue-template-compiler
package.json:
{ ?"name": "vue2.x_demo", ?"version": "1.0.0", ?"description": "vue webpack", ?"main": "index.js", ?"scripts": { ???"test": "echo \"Error: no test specified\" && exit 1", ???"build": "webpack --config webpack.config.js --mode development", ???"start": "webpack-dev-server --config webpack.config --mode development" ?}, ?"keywords": [ ???"vue" ?], ?"author": "Nyan Shen", ?"license": "ISC", ?"dependencies": { ???"vue": "^2.6.10" ?}, ?"devDependencies": { ???"css-loader": "^2.1.1", ???"html-webpack-plugin": "^3.2.0", ???"vue-loader": "^15.7.0", ???"vue-template-compiler": "^2.6.10", ???"webpack": "^4.29.5", ???"webpack-cli": "^3.2.3", ???"webpack-dev-server": "^3.1.14", ???"webpack-merge": "^4.2.1" ?}}webpack.config.js basic config
const path = require(‘path‘);const webpack = require(‘webpack‘);const {VueLoaderPlugin} = require(‘vue-loader‘);const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);module.exports = { ???entry: path.join(__dirname, ‘src/index.js‘), ???output: { ???????filename: ‘bundle.js‘, ???????path: path.join(__dirname, ‘dist‘) ???}, ???module: { ???????rules: [ ???????????{ ???????????????test: /\.vue$/, ???????????????use: ‘vue-loader‘ ???????????}, ???????????{ ???????????????test: /\.css$/, ???????????????use: ‘css-loader‘ ???????????} ???????] ???}, ???plugins: [ ???????new webpack.DefinePlugin({ ???????????‘process.env.NODE_ENV‘: JSON.stringify(‘development‘) ???????}), ???????new HtmlWebpackPlugin({ ???????????template: path.join(__dirname, "src/index.html"), ???????????filename: ‘index.html‘ ???????}), ???????new VueLoaderPlugin() ???], ???devServer: { ???????port: 8088, ???????historyApiFallback: true, ???????proxy: { ???????????‘/api/*‘: { ???????????????target: ‘localhost:12306‘, ???????????????changeOrigin: true ???????????} ???????} ???}}index.js. entry file:
import Vue from "vue";import App from "./app.vue";const root = document.getElementById(‘root‘);new Vue({ ???render: (h) => h(App)}).$mount(root)index.html
<!DOCTYPE html><html lang="en"> ?<head> ???<meta charset="utf-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ???<meta name="theme-color" content="#000000"> ???????<title>vue Webpack</title> ?</head> ?<body> ???<div id="root"></div> ?</body></html>
app.vue component
<template> ???<div class="test">{{test}}</div></template><script>export default { ???data() { ???????return { ???????????test: "Hello Vue" ???????} ???}}</script><style> ???.test { ???????color: red; ???}</style>Vue: webpack js basic structure
原文地址：https://www.cnblogs.com/Nyan-Workflow-FC/p/10589914.html