01-webpack5学习-基础打包

纯黑色山羊

已于 2022-06-13 00:07:04 修改

阅读量297

点赞数

分类专栏： webapck5 文章标签：学习 webpack javascript

于 2022-06-11 13:05:36 首次发布

本文链接：https://blog.csdn.net/weixin_39876270/article/details/125232748

版权

webapck5 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

项目结构

webpackBase
│  webpack.config.js
├─public
│      index.html
└─src
        index.js

安装依赖

在webapckBase目录下运行

npm i webpack webpack-cli --save-dev

webpack.config.js配置文件

const { resolve } = requrie('path');
module.exports = {
	// 模式还可以设置为production，两种方式进行的打包优化不同
	mode: 'development',
	// 打包的入口文件-单一文件打包方式
	entry:'./src/index.js',
	output:{
	    // 打包文件输出的目录
		path: resolve(__dirname,'dist'),
		// 打包文件输出的文件名
		filename:'index.js'
	}
}

HTML文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入打包后的index.js文件 -->
    <script src="../dist/index.js"></script>
  </head>
  <body></body>
</html>

打包命令

方式一：在webapckBase目录下运行

webpack --config ./webapck.config.js

方式二：在package.json文件的scripts属性新增如下命令

{
	...
	"scripts":{
		"build":"webpack --config ./webpack.config.js"
	}
	...
}

修改保存后，在webpackBase目录下运行如下命令：

npm run build

打包后的目录

webapckBase
│  package-lock.json
│  package.json
│  webpack.config.js
├─dist
│      index.js
├─public
│      index.html
└─src
        index.js

纯黑色山羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-webpack5学习-基础打包

webapck5基础打包
复制链接

扫一扫

专栏目录