webpack build project directory
- Create directory (src)
- Create the main page src/main.html (SPA),
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPA</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- Create entry file src/index.js
- Create modularized corresponding file directories src/js, src/css, src/view
- Create webapck.config.js in the parent directory
- Introduce the core module path in webpack.config.js
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'sec/index.js')
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundel.js"
}
}
- Download webpack webapck-cli
npm i webpack webpack-cli -D
- Compile html file, download html-loader
npm i html-loader -D
module: {
rules: [
// 解析html
{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
}
]
}
- Parse css download loader
npm i css-loader style-loader -D
module: {
rules: [
// 解析html
{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
},
// 解析css
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
]
}
- The code block thrown by module.exports is imported using require()
The code block thrown by export is imported using import - The entry file introduces html, js, css code blocks, because the parsing html has been configured in webpack.config.js before, and the loaders such as css have been imported, so it can be imported in between, if it has not been configured in webpack.config.js before The loader for parsing html and css needs to be configured in the module
// 入口文件
//html
const headerHtml = require('./view/header.html')
const bodyHtml = require('./view/body.html')
const footerHtml = require('./view/footer.html')
const App = document.getElementById('app')
// css
import './css/common.css'
// js
const mainJs = require('./js/main')
// 目标元素
App.innerHTML = headerHtml + bodyHtml + footerHtml
mainJs()
- Compress and package the main page in webapck.config.js and configure plugins
plugins: [
// 打包主页面
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src/index.html')
})
]
- Add webpack service, write and access the page we wrote on the server, you need to configure the devServer in webpack.config.js
npm i webpack-dev-server -D
devServer: {
// 服务路径
contentBase: path.join(__dirname, 'dist'),
// 端口号
port: 9000,
}
- Terminal run
npx webpack serve
Through the above operations, we can see the effect of our page on the local server