webpack安装入门使用

最新推荐文章于 2024-09-18 23:07:56 发布

mrjimin

最新推荐文章于 2024-09-18 23:07:56 发布

阅读量156

点赞数

文章标签： npm js webpack

本文链接：https://blog.csdn.net/mrjimin/article/details/105096644

版权

一、安装所需的webpack

在D盘下创建一个webpacktest文件夹作为项目目录，命令行中切换到对应的文件路径
在这里插入图片描述
搭建webpack的命令

npm init //初始化，创建package.json文件
npm install --save-dev webpack //安装webpack 模块，会多一个node_modules文件
npm install --save-dev webpack-cli //安装webpack-cli 模块(4.0以后的版本需要安装独立的webpack-cli包)）
npm install webpack -g //全局安装（未安装全局需先安装一下）
npm install webpack-cli -g //全局安装（未安装全局需先安装一下）

二、进行项目打包测试
在这里插入图片描述
创建问一个src文件夹、index.html、webpack.config.js，
在src文件夹下创建index.js
1.index.js

2.webpack.config.js写最基本的代码

const path=require('path');
module.exports={
	/* 打包单个js */
    entry:'./src/index.js',//指定程序的入口文件
   	 打包多个js 	
    //entry:{//指定程序的入口文件         
    //    entry:["./src/index","./src/detail"]
    //},
    //
    output:{//指定打包后的文件路径和名称
        path:path.resolve(__dirname, './dist'),
        filename:'main.js'	//文件名称
    },
    module:{},//用来存放依赖的模块
    plugins:[],//用来存放依赖的插件
}

2.index.html 引入打包后的main.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="dist/main.js"></script>
</head>
<body>
    
</body>
</html>