webpack初级入门教程（二）

vip.khan

于 2019-11-01 17:08:34 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏：前端教程

本文链接：https://blog.youkuaiyun.com/vipsongtaohong/article/details/102861311

本文是Webpack入门教程的第二部分，主要介绍了如何在项目中创建pages文件夹并组织模块，配置webpack.config.js以指定JS入口和输出路径，使用html-webpack-plugin插件配置HTML打包，设置端口和IP，以及加载图片的步骤和所需安装的依赖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在根目录创建一个pages文件夹，再在pages文件夹里面创建模块，如下图所示

2.再到webpack.config.js中配置js打包模块的入口和打包后的资源存放路径

entry:{
		// 配置多个入口
		index:"./pages/index/index.js",
		login:"./pages/login/index.js",
		person:"./pages/person/index.js",
	},
	output: {
		path: path.join(__dirname, 'dist'),//打包文件存放路径__dirname + "/public",
		// publicPath: '/dist/',  //公共路径
		filename: "[name].bundle.js"//打包后的文件名字
	},

3.用html-webpack-plugin插件配置html打包路径等

安装html-webpack-plugin插件：cnpm install html-webpack-plugin -D

webpack.config.js中写入html-webpack-plugin配置，如下

// 引入path 模块
var path = require('path');
// 引入html-webpack-plugin插件
var HtmlWebpackPlugin = require("html-webpack-plugin");
modul

最低0.47元/天解锁文章