Webpack-1

最新推荐文章于 2023-06-19 14:13:38 发布

香辣素毛肚

最新推荐文章于 2023-06-19 14:13:38 发布

阅读量155

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_34153210/article/details/106663022

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

看视频学习的例子，浏览器不能识别import语句，所以要使用Webpack。我之前用Edge浏览器实现过的:

index.html:

<!DOCTYPE html>
<html>
<head>
	<title></title>

</head>
<body>
<script type="module">
	import {Page} from './Page.js';
	let page=new Page();
    page.append('header');
</script>

</script>
</body>
</html>

Page.js：

function Page(){
	this.header=document.createElement('div');

	this.dom=document.getElementsByTagName("body")[0]
}
Page.prototype.append=function(value){
	this.header.innerText=value;
	this.dom.append(this.header);
}

export {Page};

显示效果：

这不是可以吗？

谷歌浏览器报错，应该涉及到跨域问题，以后再解决。

安装步骤：

npm init

npm init用来生成一个新的package.json文件

安装webpack

npm install webpack webpack-cli -D

一共两步

npm install 会搜索package-lock.json里面的内容，下载相应的module.

来源：https://javascript.ruanyifeng.com/nodejs/npm.html#toc7

来源：https://www.cnblogs.com/iceflorence/p/8925394.html

所以 npm install webpack webpack-cli -D 最后出现在我的

如果我把 package-lock.json，node_modules文件都删除，再执行 npm install,会发生什么，如下：

执行 mpn install

保留package-lock.json，且把package.json中的webpack 版本改为4.42.0，npm install 会优先去package-lock.json寻找版本和下载地址进行下载。也就是，这种情况下，package-lock.json优先级较高。（更多的也没测试了，不懂源码只能随意试试了）

现在我们试一试webpack打包命令:

我们执行npm init和npm install webpack 命令的的目录长这样

新建三个文件，index.html index.js Page.js,如下

其中内容如下：

index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript" src="./index.js"></script>>
</body>
</html>

index.js

	import Page from './Page.js';
	let page=new Page();
    page.append('header');

Page.js

export default function Page(){
	this.header=document.createElement('div');

	this.dom=document.getElementsByTagName("body")[0]
}
Page.prototype.append=function(value){
	this.header.innerText=value;
	this.dom.append(this.header);
}

（代码应该是对的吧，没有测试，但是我们现在是学习打包过程）

当前目录下执行

npx webpack index.js

可以看到生成了一个dist文件夹

说明打包成功。

现在看看如何配置webpack

在当前项目的根目录下（也就是上图的webpack-demo文件夹），新建一个webpack.config.js文件，内容如下：

const path=require("path");
module.exports= {
	entry:"./index.js",//入口文件
	output:{
		filename:"bundle.js",//输出文件名
		path:path.resolve(__dirname,"bundle"),//输出路径
	}
}

执行

npx webpack

npx命令会去当前目录寻找webpack命令，除非全局安装webpack，可以不加npx命令

效果如下

打开我们的webpack-demo下的index.html文件，发现出了问题

我们的index.html引入的index.js应该换成打包好的文件

刷新浏览器：

在试试谷歌浏览器是否能正常显示

推荐慕课网的视频教程：https://coding.imooc.com/class/316.html

香辣素毛肚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack-1

看视频学习的例子，浏览器不能识别import语句，所以要使用Webpack。我之前用Edge浏览器实现过的:index.html:<!DOCTYPE html><html><head> <title></title></head><body><script type="module"> import {Page} from './Page.js'; let page=new Page(
复制链接

扫一扫