took over a small project. Instead of using vue, I built a small project with webpack.
I didn"t think too much about it at first, but then there were more pages, so it was obvious that there was a need for first-level routing and second-level routing.
because it is not clear how to implement secondary routing with vue,.
ask your predecessors how to use js to simply implement second-level routing.
const htmlWebpackPlugin = require("html-webpack-plugin")
const extractTextWebpackPlugin = require("extract-text-webpack-plugin")
const path = require("path")
//
const pages = [
{name: "index"},
{name: "collections"},
{name: "projects"},
{name: "page4"},
{name: "page5"},
{name: "page6"},
{name: "page7"},
{name: "page8"},
{name: "page9"},
{name: "page10"},
{name: "page11"}
]
// webpack
const entry = path.join(__dirname, "/src/main.js")
// webpack
const output = {
path: path.join(__dirname, "/public"),
filename: "[name].js"
}
//
const devServer = {
contentBase: path.join(__dirname, "/public"),
historyApiFallback: true,
inline: true
}
const _module = {
rules: [
{
test: /\.html$/,
use: {
loader: "html-loader"
}
},
{
test: /(\.jsx|\.js)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
},
},
{
test: /(\.jpg|\.png|\.gif|.jpeg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 12000,
outputPath: "images",
name: "[name].[hash].[ext]"
}
}
]
},
{
test: /\.scss$/,
use: extractTextWebpackPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader"
},
{
loader: "sass-loader"
}
]
})
},
{
test: /\.(otf)|(woff)|(eot)|(ttf)$/,
use: [
{
loader: "url-loader",
options: {
limit: 100000,
name: "[hash:8].[name].[ext]",
outputPath: "images"
}
}
]
}
]
}
//
const plugins = pages.map(({name}) => new htmlWebpackPlugin({
filename: path.join(__dirname, `/public/${name}.html`),
template: path.join(__dirname, `/src/template/${name}.temp.html`)
}))
plugins.push(new extractTextWebpackPlugin("styles.css"))
module.exports = {
entry,
output,
devServer,
module: _module,
plugins
}
The resource directory packaged by webpack looks like this