热门关键字:
jquery > jquery教程 > jquery教程 > 功能模块设计和目录结构

功能模块设计和目录结构

354
作者:管理员
发布时间:2021/6/2 17:49:12
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4851
  一、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 端口


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




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐