webpack打包前端项目

最新推荐文章于 2024-09-21 14:00:00 发布

.慢慢亦漫漫

最新推荐文章于 2024-09-21 14:00:00 发布

阅读量672

点赞数

文章标签： webpack 前端 npm

本文链接：https://blog.csdn.net/weixin_43183219/article/details/124895231

版权

本文介绍了如何使用webpack打包前端项目，从项目初始化到webpack安装、配置，详细讲解了webpack的入口、出口、模式配置选项，并给出了完整的配置文件示例。通过npm命令行工具进行操作，最终将项目打包至dist目录。

摘要由CSDN通过智能技术生成

在webpack安装之前我们要进行项目初始化，生成一个package.json文件

npm init -y 输入这个命令行进行项目初始化

在这里插入图片描述

安装webpack和webpack-cli

npm i webpack webpack-cli --dev

在package.json文件的scripts中配置启动命令

“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”: “webpack”,
“start”: “webpack serve”
}

webpack默认的入口文件是src目录下的index文件，我们需要在项目的根目录下创建src文件夹，在src文件夹里面创建一个index文件。

    // 模块导出
	module.exports = {
   }
	//  模块导入
	const res = requrie('模块url')

       //  模块导出
		export default 模块名
		export 模块对象
		
		//  模块导入
		import  ... from '模块url'

对webpack 进行配置，需要在项目根目录下创建配置文件 webpack.config.js，该文件是一个模块

const path=require('path')
module.exports = {
   
//单一的入口文件
entry:index.js;

//多个入口文件，将entry的值设为数组
entry:['index.js', 'main.js',...]
}

output: {
   
		//设置出口文件的目录
        path: path.resolve(_

关注