webpack 搭建工程目录
- 创建目录（src）
- 创建主页面 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>
- 创建入口文件 src/index.js
- 创建模块化对应的文件目录 src/js、src/css、src/view
- 创建父目录中创建 webapck.config.js
- 在webpack.config.js中引入核心模块path
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'sec/index.js')
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundel.js"
}
}
- 下载webpack webapck-cli
npm i webpack webpack-cli -D
- 编译html文件，下载html-loader
npm i html-loader -D
module: {
rules: [
// 解析html
{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
}
]
}
- 解析css 下载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'],
},
]
}
- module.exports 抛出的代码块 使用require（）引入
export 抛出的代码块 使用import 引入 - 入口文件引入html，js, css 代码块，因为之前已经在webpack.config.js中配置好了解析html，已经css等的loader，所以可以之间引入，如果之前没有在webpack.config.js中配置解析html，css的loader需要在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()
- 在webapck.config.js中对主页面进行压缩打包，配置plugins
plugins: [
// 打包主页面
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src/index.html')
})
]
- 添加webpack服务，在服务器上写访问我们写的页面，需要配置webpack.config.js中的devServer
npm i webpack-dev-server -D
devServer: {
// 服务路径
contentBase: path.join(__dirname, 'dist'),
// 端口号
port: 9000,
}
- 终端运行
npx webpack serve
通过以上操作我们就可以在本地服务器上看到我们的页面效果
转载：https://blog.csdn.net/Y_X_gang/article/details/112259808
查看评论