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

通过以上操作我们就可以在本地服务器上看到我们的页面效果

webpack 搭建工程目录

webpack 搭建工程目录

猜你喜欢