在项目中怎么安装和配置webpack

在项目中怎么安装和配置webpack

这篇文章主要介绍“在项目中怎么安装和配置webpack”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“在项目中怎么安装和配置webpack”文章能帮助大家解决问题。

　　一、webpack基本使用

　　1.新建空白文件（目录）文件名不能是webpack，运行 npm init -y （路径中不能有中文），初始化package.json文件

　　2.创建src源代码目录

　　3.在src下创建index.html

　　4.初始化首页基本的结构

　　5.下载页面需要的依赖包

　　二、在项目中安装和配置webpack

　　1.运行 npm install webpack webpack-cli –D ，安装webpack相关工具

　　2.在项目根目录创建webpack.config.js文件，配置文件

　　3.在webpack文件中添加

　　module.exports={

　　mode: 'development' // mode 用来指定构建模式

　　}

　　4.在package.json中

　　"scripts":{//添加

　　"dev":"webpack"

　　}

　　5.在终端中运行 npm run dev 启动webpack进行项目打包

　　三、打包的入口和出口

　　1.webpack 默认

　　入口文件：src:index.js

　　出口文件：dist:main.js

　　2.需要修改默认文件时 在module.exports中添加

　　entry: path.join（__dirname, ''），//打包入口路径

　　output: {

　　path: path.join（__dirname, ''），//出口路径

　　filename: 'bundle.js'//出口文件名称

　　}

　　四、webpack 自动打包功能

　　1.运行npm i webpack-dev-server -D命令 安装自动打包工具

　　2.修改package.json 的dev:"webpack-dev-server"

　　3.修改html页面的引用script脚本的路径 src=""

　　4.运行npm run dev进行重新打包

　　5.在浏览器中访问

　　在浏览器中预览页面

　　配置自动打包相关参数 （打包过后，会自动按照下面方式打开）

　　--open 默认浏览器

　　--host 127.0.0.1

　　--port 端口

　　修改配置文件都需要重新打包一次

关于“在项目中怎么安装和配置webpack”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。