Webpack 入门 基础知识

写一个Render对象可以在#root元素下挂载字符串的对象，使用ES Module语法导入后通过Webpack打包

Step 0. 创建npm项目 hello-webpack

  • mkdir hello-webpack && cd hello-webpack

  • mkdir src && mkdir dist 创建源码目录

  • npm init demo项目一路默认即可

  • 安装webpack/webpack-cli npm install webpack webpack-cli --save-dev

Step 1. 项目根路径创建index.html

这是作为项目对外展示的主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

./dist/bundle.js还不存在，稍后webpack会自动打包出来，这里先导入

Step 2. 编写src/render.js和src/index.js

src/render.js

class Render {
    message(mountPoint, text) {
        var message = document.createElement("div")
        message.innerText = text
        mountPoint.append(message)
    }
}

export default Render;

src/index.js

import Render from './render'


new Render().message(document.getElementById("root"), "Hello, World!")

Setp 3. 编写webpack配置文件webpack.config.js

const path = require("path")

var config = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
    }
}

module.exports = config

Step 4. 创建Npm Script

package.json中的scripts对象添加一栏build命令

{
  "name": "hello-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0"
  }
}

在项目根路径下执行命令npm run build,开始打包,完成

页面成功显示Hello, World!

posted @ 2020-11-07 14:34  Toream学习笔记  阅读(124)  评论(0)    收藏  举报