webpack入门最简单的demo

1、在空文件夹下 npm init -y

2、npm install --save-dev webpack

3、新建src文件夹，在src里新建index.html，写入：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Demo</title>
  </head>
  <body>
    <div id='app'></div>
    <script src="bundle.js"></script>
  </body>
</html>

4、新建main文件夹，在main里新建main.js，写入：

var Hello = document.createElement('div');
Hello.textContent = "Hello World";
document.querySelector("#app").appendChild(Hello);

4、新建webpack.config.js文件，写入：

module.exports = {
    entry:  __dirname + "/main/main.js",//唯一入口文件
    output: {
      path: __dirname + "/src",//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
    },
    mode: "production"
  }

5、在package.json里的scripts对象中加入一行：

"build": "webpack"

6、命令行运行：

npm run build

7、打开index.html，显示“hello world”。

posted on 2024-07-24 19:12 Amy鱼阅读(17) 评论(0) 收藏举报