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": "cross-env NODE_ENV=prodction webpack --config webpack.config.js", "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config" }, "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');
const isDev = process.env.NODE_ENV === 'development';
const common_config = {
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: [
'style-loader',
'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()
]
}
if (isDev) {
common_config.devServer = {
port: 8088,
host: '0.0.0.0',
historyApiFallback: true,
overlay: {
errors: true
},
proxy: {
'/api/*': {
target: 'localhost:12306',
changeOrigin: true
}
}
}
}
module.exports = common_config;
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>