首页 网络技术
  1. 正文

在项目中怎么安装和配置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
本文链接:https://www.qqooo.cn/post/6686.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!