webpack demo 讲解

最新推荐文章于 2023-07-26 11:57:21 发布

灯塔引路

最新推荐文章于 2023-07-26 11:57:21 发布

阅读量1k

点赞数

分类专栏： webpack 一点新技能Get 前端攻城狮文章标签： nodejs webpack

本文链接：https://blog.csdn.net/a82793510/article/details/52187207

版权

一点新技能Get 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端攻城狮

12 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

在学习webpack时，笔者假设你已经对nodeJS有一定熟悉程度。并且你在你的机器上已经安装了nodeJS

webpack Demo01

我们新建一个文件夹叫demo01
mkdir demo01
在demo01中，建立webpack.config.js ，它是webpack项目的入口文件。

/**webpack 配置文件,告诉webpack 它需要做什么*/
// module.exports 是node JS 的入口 
module.exports = {      
      // 页面入口文件配置   
      entry: './main.js',
      // 页面文件输出配置
      output: {
        filename: 'bundle.js'
      }
};

入口要执行的js文件main.js

document.write('<h1>Hello World</h1>');

执行Html:index.html

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

index.html 引入了webpack自动打包成的bundle.js

这里写图片描述
执行nodeJS命令:

$ webpack entry.js bundle.js

会自动生成bundle.js 文件
用浏览器打开index.js 页面，会显示出hello world出来。这就是我们学习webpack的第一个程序。
Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 –config 选项来指定配置文件。

此外，我个人建议用 nodeJS 安装一个 http-server 到本地全局中。
npm install - g http-server
安装完成后，在demo01 目录下命令输入 http-server 就会起一个本地服务,我们访问localhost:8080 就能访问。具体可以通过 http-server -h 查看详细使用。

参考资料

http://webpackdoc.com/configuration.html
http://webpack.github.io/docs/

灯塔引路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack demo 讲解

在学习webpack时，笔者假设你已经对nodeJS有一定熟悉程度。并且你在你的机器上已经安装了nodeJSwebpack Demo01我们新建一个文件夹叫demo01 mkdir demo01 在demo01中，建立webpack.config.js ，它是webpack项目的入口文件。/**webpack 配置文件,告诉webpack 它需要做什么*/// module
复制链接

扫一扫