学习webpack的一些坑

最新推荐文章于 2023-03-12 17:57:48 发布

caikys

最新推荐文章于 2023-03-12 17:57:48 发布

阅读量784

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/caikys/article/details/80759867

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在学习webpack，我具体参考的教程是：https://segmentfault.com/a/1190000006178770和https://blog.csdn.net/u012631731/article/details/73716951/，觉得写得很好，大家可以去看一下；我做一下学习笔记：

1.首先安装好npm，然后在项目目录下执行npm init,初始化一个项目包。大家就会看到项目多了个package.json的文件。

2.在项目根目录，也就是在含有package.json目录下执行命令npm install -g webpack（全局安装）和 npm install --save-dev webpack（项目里安装），执行完这一步就有你会发现项目又多了node_module的文件夹，很神奇吧！

3.接下来呢，在项目里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:

index.html --放在public文件夹中;
Greeter.js-- 放在app文件夹中;
main.js-- 放在app文件夹中;

4.我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js）

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

5.在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：

// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
}

6.main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。

//main.js
const greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

7.最后终端中输入如下命令

node_modules/.bin/webpack app/main.js public/bundle.js

事实上我在这里填坑填了很久，因为我执行完这个，也按照指令执行了webpack-cli，但是始终会报错，如下图：

于是我就开始找各种方法都报错，最后皇天不负苦心人有心人，我找到了解决的办法，真的好开心啊，在终端输入命令为：需要明确设置模式

node_modules/.bin/webpack --mode=development app/main.js -o public/bundle.js

这个时候终于在public文件夹自动生成bundle.js了，这个时候打开index.html的时候就可以得到我们想要的效果啦；在页面输出

Hi there and greetings!

完成！

总结途中报错和解决方法：

百度找答案说是删除node_modules重新npm install,但是我发现无论我怎么重新安装都不行，最后是输入;npm install webpack和npm install webpack-dev-server，再执行npm run server，就可以啦。

caikys

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习webpack的一些坑

最近在学习webpack，我具体参考的教程是：https://segmentfault.com/a/1190000006178770和https://blog.csdn.net/u012631731/article/details/73716951/，觉得写得很好，大家可以去看一下；我做一下学习笔记：1.首先安装好npm，然后在项目目录下执行npm init,初始化一个项目包。大家就会看到项目...
复制链接

扫一扫