WEBPACK_webpack初体验

小咪咪 2023-02-22 10:46 153阅读 0赞

基础使用

1.安装插件 需要安装webpack和webpack-cli

  1. npm i -s webpack webpack-cli

2.生成package.json文件

  1. npm init -y

3.执行打包命令

  1. npx webpack

4.运行命令

  1. npx webpack-dev-server

自定义打包

1.把前端当做一个http容器，安装指令

  1. npm i -s webpack-dev-server

运行指令

  1. npx wevpack-dev-server

2.根目录新建 webpack.config.js 文件 —默认文件
文件内容：

  1. let Htmlwebpackplugin = require('html-webpack-plugin'); //导入html-webpack-plugin插件
  2. derServer:{ 
  3.     port:8081,                    //指定端口
  4.     open:true,                    //服务启动自动打开浏览器
  5.     progress:true,                //进度条
  6.     contentBase:'./dist',          //http容器根目录
  7. },
  8. //打包后的js自动整合到html文件
  9. //安装插件指令 npm i -D html-webpack-plugin
  10. plugins:[
  11.     new Htmlwebpackplugin({ 
  12.         template:'./src/index.html',        //模板
  13.         filename:'index.html',                //打包后模板名
  14.     })
  15. ]

项目发布

  1. npm i -g serve
  2. serve dist

发表评论

表情：
评论列表 （有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

    相关 linux初体验

                  linux正式公布是在1991年，我想大家对很多linux版本都耳熟能详，当然了，各个版本各有所长，但是同出一门，都使用了linux内核，它是一套可

    悠悠悠悠/ 0 赞/ 403 阅读

    相关 队列初体验

    队列：只允许在一端进行插入数据操作，在另一端进行删除数据操作的特殊线性表。 进行插入操作的一端称为队尾，通常称为入队列；进行删除操作的一端称为队头，通常称为出队列。 队列具有先

    淡淡的烟草味﹌淡淡的烟草味﹌/ 0 赞/ 402 阅读