栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

webpack基础步骤

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

webpack基础步骤

webpack基础步骤
  • 第一步:安装webpack
  • 第二步:创建文件,编写代码
  • 第三步:webpack打包

俺就是想写写文章,整理一下思路,锻炼一下写作能力。
简单的基础知识,往往需要重复地学习~

第一步:安装webpack
  1. 创建项目根目录(webpack-test);
  2. 需要初始化node配置文件(package.json),所以在项目根目录下运行:npm init;
  3. 需要安装webpack、webpack-cli,所以在项目根目录下运行:npm install webpack webpack-cli --save-dev;
  4. 如果需要查看版本号测试是否安装成功,所以在项目根目录下运行:npx webpack -v 和 npx webpack-cli -v。
第二步:创建文件,编写代码

在项目根目录下创建src文件夹,用来存放编写的代码文件,然后进行如下操作。

  1. 编写content-test.js文件,目录:./src/
    export default ()=>{
        document.write("这是一个内容编写文件的输出结果")
    }
    
  2. 编写index.js文件,目录:./src/
    import say from './content-test'
    say()
    
第三步:webpack打包
  1. 运行命令:npx webpack --entry=./src/index.js --output-filename=output.js --mode=development,即可打包生成dist目录下的输出文件output.js。
  2. 创建index.html文件,引入:
  3. 浏览器打开index.html

    结束了。
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/987828.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号