webpack 打包项目

最新推荐文章于 2024-04-27 08:39:59 发布

说学逗唱攻城狮

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量262

点赞数

分类专栏： webpack4

本文链接：https://blog.csdn.net/qq_34720531/article/details/86088034

版权

webpack4 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

检查 node npm 版本（此处不做node npm 安装教程，未安装自行百度）

node -v
npm  -v

初始化项目（得到 package.json 文件）

npm init

安装 webpack

npm install --save-dev webpcak  // 本地安装

创建3个文件
1). index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
		<script src="./dist/bundle.js"></script>
	</body>
</html>

2). main.js （入口文件）

const text = require("./src/hello.js");
document.querySelector("#app").appendChild(text());

3). src/hello.js

module.exports = function() {
	var text = document.createElement("p");
	text.textContent = "test5555";
	return text;
}

webpack 高版本运行 webpack {entry file} -o {dist bundle file}

webpack main.js -o dist/bundle.js

LOADER

webpack 本身只能处理 javascript，其他类型的文件需要用 loader 来转换
如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式再处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。

npm install css-loader style-loader

创建一个 css 文件

body {
    background: pink;
}

入口文件引入这个 css 文件

require("!style-loader!css-loader!./src/style.css");   // 这里我把css文件放到src目录下 路径需要写正确
const text = require("./src/hello.js");
document.querySelector("#app").appendChild(text());

打包

webpack main.js -o dist/bundle.js

在这里插入图片描述

说学逗唱攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 打包项目

检查 node npm 版本（此处不做node npm 安装教程，未安装自行百度）node -vnpm -v初始化项目（得到 package.json 文件）npm init安装 webpacknpm install --save-dev webpcak // 本地安装创建3个文件1). index.html&amp;lt;!DOCTYPE html&amp;gt;...
复制链接

扫一扫