webpack 搭建工程目录

webpack 搭建工程目录

  1. 创建目录(src)
  2. 创建主页面 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>
  1. 创建入口文件 src/index.js
  2. 创建模块化对应的文件目录 src/js、src/css、src/view
  3. 创建父目录中创建 webapck.config.js
  4. 在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"
	}
}
  1. 下载webpack webapck-cli
npm i webpack webpack-cli -D
  1. 编译html文件,下载html-loader
npm i html-loader -D
    module: {
     
        rules: [
            // 解析html
            {
     
                test: /\.(html)$/,
                use: {
     
                    loader: 'html-loader'
                }
            }
        ]
    }
  1. 解析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'],
            },
        ]
    }
  1. module.exports 抛出的代码块 使用require()引入
    export 抛出的代码块 使用import 引入
  2. 入口文件引入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()
  1. 在webapck.config.js中对主页面进行压缩打包,配置plugins
    plugins: [
        // 打包主页面
        new HtmlWebpackPlugin({
     
            template: path.resolve(__dirname, 'src/index.html')
        })
    ]
  1. 添加webpack服务,在服务器上写访问我们写的页面,需要配置webpack.config.js中的devServer
npm i webpack-dev-server -D
    devServer: {
     
        // 服务路径
        contentBase: path.join(__dirname, 'dist'),
        // 端口号
        port: 9000,
    }
  1. 终端运行
npx webpack serve

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

你可能感兴趣的:(前端框架,webpack,webpack)