webpack 新版本的安装和使用

最新推荐文章于 2024-09-27 10:57:19 发布

前端深深

最新推荐文章于 2024-09-27 10:57:19 发布

阅读量1k

点赞数 1

文章标签： webpack

本文链接：https://blog.csdn.net/Vaen_Lin/article/details/88692247

版权

初始化文件
1. 新建项目文件夹webpack
2. cnpm init，你会看到多了一个package.json配置文件
安装webpack
1. cnpm install -g webpack
2. cnpm install --g webpack-cli
3. cnpm install --save-dev webpack
4. cnpm install --save-dev webpack-cli

创建默认js入口

在项目文件夹下建src文件夹，并在src下建立两个文件

一个文件是文件Hello.js

module.exports = function() {
  var hello = document.createElement('div');
  hello.textContent = "Hello! I am here.";
  return hello;
};

一个文件是默认入口文件index.js

const hello = require('./Hello.js');
document.querySelector("#root").appendChild(hello());

创建index.html文件

在项目文件夹下创建index.html文件

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

运行webpack
1. 执行命令 webpack，则会生成一个dist文件，dist文件夹下会生成打包好的main.js文件
浏览器打开html，页面显示Hello! I am here.即成功
如果不想用默认入口和导出文件，也可以用命令 webpack xxx.js -o webpack.bundle.js（导出文件）
参考链接
1. https://blog.csdn.net/qq_39207948/article/details/79436644
2. https://blog.csdn.net/gujinapenggu5/article/details/82021817