Vue,App,router, is introduced into both entry files, but the package is not extracted. Is there anything wrong with the configuration? See Code
< H2 > three.js < / H2 >import Vue from "vue"
import App from "./App"
import router from "./router"
Vue.config.productionTip = true
/* eslint-disable no-new */
new Vue({
el: "-sharpapp",
router,
components: { App },
template: "<App/>"
})
< H2 > main.js < / H2 >
import Vue from "vue"
import App from "./App"
import router from "./router"
Vue.config.productionTip = true
/* eslint-disable no-new */
new Vue({
el: "-sharpapp",
router,
components: { App },
template: "<App/>"
})
< H2 > webpack.config.js < / H2 >
"use strict"
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const CopyWebpackPlugin = require("copy-webpack-plugin")
const webpack = require("webpack")
const ZopfliPlugin = require("zopfli-webpack-plugin")
const utils = require("./build/utils")
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
module.exports = {
context: path.resolve(__dirname, "./"),
devtool: "inline-source-map",
mode: "development",
resolve: {
extensions: [".js", ".vue"],
alias: {
"@": path.resolve(__dirname, "src"),
"vue$": "vue/dist/vue.esm.js"
}
},
entry: {
test: "./src/main.js",
three: "./src/three.js"},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.js$/,
loader: "eslint-loader",
enforce: "pre",
include: path.resolve(__dirname, "src"),
options: {
formatter: require("eslint-friendly-formatter")
},
exclude: /node_modules/
},
{
test: /\.js$/,
loader: "babel-loader",
include: path.resolve(__dirname, "src"),
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: "vue-loader",
include: path.resolve(__dirname, "src"),
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader",
options: {
limit: 10,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: "url-loader",
options: {
limit: 10000
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: "url-loader",
options: {
limit: 10000
}
},
{
test: /\.css$/,
use: [
"vue-style-loader",
{
loader: "css-loader",
options: { importLoaders: 1 }
},
"postcss-loader"
]
},
{
test: /\.(htm|html)$/i,
use:[ "html-withimg-loader"]
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: "index.html",
inject: true,
template: "index.html",
chunks: ["test"],
inlineSource: ".(js|css)$"
}),
new HtmlWebpackPlugin({
inject: true,
filename: "three.html",
template: "three.html",
chunks: ["three"],
inlineSource: ".(js|css)$"
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.SplitChunksPlugin({
chunks: "all",
name: true
})
// new BundleAnalyzerPlugin()
]
}