study online tutorials learn to package projects using webpack, a simple code implementation.
the entry file index.html of the interface is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div id="app">{{message}}</div> <!-- Vue -->
<!-- <script src="dist/main.js"></script> -->
</body>
</html>/ / main.js
import Vue from "vue"
import Hello from "./components/Hello.vue"
new Vue({
el: "-sharpapp",
template: "<div><hello></hello></div>",
components: {Hello}
})/ / src/componets/Hello.vue
<template>
<div>{{message}}</div>
</template>
<script>
export default {
/* data: () => ({message: "Hello Vue.js!"})
*/
data(){
return {
message:"Hello Vue.js!"
}
}
}
</script>look at webpack.config/base.js
again.const path = require("path")
const root = path.resolve(__dirname, "..") //
module.exports = {
entry: path.join(root, "src/main.js"), //
output: {
path: path.join(root, "dist"), //
filename: "main.js" //
},
resolve: {
alias: { //
// require("components/example") require("/src/components/example")
components: path.join(root, "src/components"),
views: path.join(root, "src/views"),
styles: path.join(root, "src/styles"),
store: path.join(root, "src/store")
},
extensions: [".js", ".vue"]
},
module: { // loader
rules: [
{test: /\.vue$/, loader: "vue-loader"}, // .vuevue-loader
{test: /\.js$/, loader: "babel-loader", exclude: /node_modules/} // .jsbabel-loadernode_modules
]
}
}another dev.js
const path = require("path")
const webpack = require("webpack")
const merge = require("webpack-merge")
const baseConfig = require("./base")
const root = path.resolve(__dirname, "..")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = merge(baseConfig, {
entry: [
"webpack/hot/dev-server", //
path.join(root, "src/index.js")
],
output: {
path: path.join(root, "dist"), //
filename: "main.js", //
},
devServer: {
historyApiFallback: true, // 404/
inline: true, //
port: 3800, //
devtool: "source-map",//
plugins: [
new webpack.HotModuleReplacementPlugin(), //
new HtmlWebpackPlugin({
template: path.join(root, "index.html"), //
inject: "body" // jsscriptbody
})
]
})
the script script in the final package.json looks like this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config/dev.js"
}, No error was reported when running: npm run dev, on the terminal input command line, but opening port 3800 found that the page was not rendered normally. After viewing it, it was found that
dist: