webpack使用记录1（hello world）

最新推荐文章于 2020-07-28 09:49:43 发布

zhaokei

最新推荐文章于 2020-07-28 09:49:43 发布

阅读量273

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/zhaokei/article/details/90643368

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、瞎看资料

https://www.cnblogs.com/-walker/p/6056529.html
https://refined-x.com/2017/06/16/Webpack是答案吗/ Webpack是答案吗
https://www.cnblogs.com/liqiyuan/p/6246870.html webpack之傻瓜式教程及前端自动化入门，跟着学到了输入webpack，报错
https://www.jianshu.com/p/080e18fcf0e3 跟着这个学了点，看阮一峰的教学，看到了一半，看评论说是1.x版本，现在已经4.x了，于是放弃。
https://www.liangzl.com/get-article-detail-17732.html ，体验到了webpack指令，然后从src下的a.js、b.js等汇总到了dist下的bundle1.bundle.js、bundle2.bundle.js、bundle3.bundle.js，感觉汇总了，但是还没体会到好处。

二、hello world（按照 https://www.liangzl.com/get-article-detail-17732.html ）

0.前提

安装node.js、webpack

1.新建文件夹

在这里插入图片描述

2.打开cmd：在test4文件夹上shift+右键》打开powershell窗口

在这里插入图片描述

3.npm init 》回车*N 》Is This OK? 回车

在这里插入图片描述

4.然后我用的vscode编辑器，啥工具都可，记事本都可以

（1）新建一个文件webpack.config.js如下
在这里插入图片描述
js里面内容如下：

// webpack.config.jsconst path = require('path');
module.exports = {
  entry: {
      bundle1:'./src/index.js',
      bundle2:'./src/a.js',    
      bundle3:'./src/b.js'  
   },    
   output: {    
       // 一个入口    
       // path: path.resolve(__dirname, 'dist'),    
       // filename: 'main.js'    
       // 多个入口    
       filename: '[name].bundle.js',    
       path: path.resolve(__dirname, 'dist')
   }
};

（2）将上面代码提到的文件夹、文件手动创建，内容随便写。
在这里插入图片描述
（3）在test4下创建index.html，内容如下

<html>  
<body>    
	<script type="text/javascript" src="./dist/bundle1.bundle.js"></script>    
	<script type="text/javascript" src="./dist/bundle2.bundle.js"></script>    
	<script type="text/javascript" src="./dist/bundle3.bundle.js"></script>  
</body>
</html>

在这里插入图片描述
引用的./dist/bundle1.bundle.js，是待会打包后会生成的js文件。

5.webpack

在这里插入图片描述

zhaokei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack使用记录1（hello world）

一、瞎看资料https://www.cnblogs.com/-walker/p/6056529.htmlWebpack是答案吗 https://refined-x.com/2017/06/16/Webpack是答案吗/webpack之傻瓜式教程及前端自动化入门 https://www.cnblogs.com/liqiyuan/p/6246870.html 跟着学到了输入webpack，报错...
复制链接

扫一扫