Webpack学习-从 helloworld 开始

最新推荐文章于 2023-09-27 17:00:32 发布
最新推荐文章于 2023-09-27 17:00:32 发布
阅读量142 收藏
点赞数 1
分类专栏： 打包 helloworld 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39355880/article/details/107629265
版权

从 helloworld 开始

  1. 初始化目录
npm init
// 接着一直回车
  1. 安装 webpack （也可以用 cnpm）
npm install webpack --save-dev
  1. 安装 webpack-cli （也可以用 cnpm）
npm install webpack-cli --save-dev
  1. 创建以下目录,并添加内容
│  index.html // 模板文件
│
├─config
│       webpack.config.js // webpack 配置
│
└─src
        index.js // 打包的文件

index.HTML

<!doctype html>
<html>

    <head>
        <title>webpack</title>
    </head>
    
    <body>
        <script src="dist/bundle.js"></script>
    </body>

</html>

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'../', 'dist'),
        filename: 'bundle.js'
    }
};

index.js

console.log("loaded")
document.getElementsByTagName('body')[0].innerHTML='helloword'
  1. 添加启动命令
    在 package.json 的 scripts 中添加：
"build": "webpack --config config/webpack.config.js --mode production"
  1. 启动
npm run build
  1. 双击 index.html 使用浏览器打开 ，看到 helloword
  2. DONE
萨米尔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack学习之helloworld(一)
凡夫俗子
10-28 997
1、webpck是什么 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle 2、从零搭建一个helloworld        2.1   安装we...
helloworld-webpack
03-20
helloworld： webpack的核心是用于现代JavaScript应用程序的静态模块捆绑器。当webpack处理您的应用程序时，它会在内部构建一个依赖关系图，该图映射您项目所需的每个模块并生成一个或多个捆绑包。 预览 安装 使用NPM： 命令 描述 npm install -D webpack webpack-cli 基本的Webpack依赖 npm install -D babel-loader @babel/core 与webpack一起工作。确保浏览器之间的javascript兼容性。 npm install -D @babel/preset-env 使用最新的ecmascript功能 npm install -D @babel/plugin-transform-runtime 使用异步功能。异步等待并获取 npm install -D html-webpack-plug
WebPack helloword
farmwang的专栏
11-22 190
 
webpack的HelloWorld
ZZY1078689276的专栏
11-09 231
文章目录webpack的语法示例源码运行结果分析 webpack的语法   webpack的基本用法： webpack + 所需打包的文件名 + 打包后的文件名   比如说我们所打包的源文件名为main.js而其打包后的名为build.js，所以说其打包指令为： webpack main.js build.js 示例   这里以简单的实现一个计算器为例来进行说明。   在项目根目录中，拷贝下面...
webpack的helloworld
走在左边
11-02 241
参考 [url]http://www.jianshu.com/p/42e11515c10f#[/url] 一。基本使用 npm install -g webpack 或 npm install --save-dev webpack npm init 初始化package.json mkdir app mkdir public vim app/Greeter.js...
webpack最简单的HelloWorld
幼儿园老大的博客
08-27 596
安装webpack和webpack-dev-server/webpack-cli 新建一个目录demo，初始化配置： npm init npm install webpack --save-dev npm install webpack-dev-server --save-dev npm install webpack-cli JS文件 demo目录下，新建 webpack.confi...
cocos2dx-webpack-example:Webpack构建过程的Hello World
05-04
cocos2dx-webpack-example Webpack构建过程的世界。如何设定使用cocos new -l js 启动一个新项目用此仓库中的项目文件替换项目文件。 运行npm install 运行webpack来构建源，并运行webpack webpack-dev-server来监视...
react-hello-world：WebpackReactJS框架
02-06
`HelloWorld.js`可能是这个项目中的一个基础组件，展示如何声明和使用React组件。 2. **Webpack配置**： - `webpack.config.js`文件会定义Webpack如何处理项目中的文件。它可能包含了入口点（entry）、输出路径...
webpack-i18n-loader:配合vue-i18n使用的wepback loader，国际化全流程解决方案
05-14
webpack-in-loadervue-i18n版本的wepback loader，给出一个简单的demo。HTML<div>你好，世界资源文件//zh.jsmodule.exports = { "a018615b35588a01": "你好，世界" //key是根据中文生成16的MD5}//en.jsmodule....
webpack-encore-pack
02-06
console.log('Hello, world!'); } ``` 然后，只需在模板文件中引用Webpack Encore生成的公共JS和CSS文件即可： ```html <!DOCTYPE html> ('app') }}" rel="stylesheet"> ('app') }}"> ... ``` Webpack ...
webpack (一) 浏览器中显示hello world
飞天代码的博客
06-30 2559
nodejs也安装了， babel编译es5也学了，目前就差使用webpack来如何在现有的浏览器中查看一个简单功能。 自然伟大的hello world 又要粉墨登场咯 第一步采用webstorm新建项目，具体细节不写了，如果还不会的可以查看我写的另外一篇博客：新建项目项目结构如下 第二步：webpack.config.js添加到项目中 由于没有找到啥法子自动创建该文件 我是手动创建的，并将
webpack使用记录1（hello world）
zhaokei的博客
05-28 273
一、瞎看资料 https://www.cnblogs.com/-walker/p/6056529.html Webpack是答案吗 https://refined-x.com/2017/06/16/Webpack是答案吗/ webpack之傻瓜式教程及前端自动化入门 https://www.cnblogs.com/liqiyuan/p/6246870.html 跟着学到了输入webpack，报错 ...
React with Webpack -1: 介绍&Helloworld
whereismatrix的专栏
11-07 1033
node.js 开发之react -- 使用webpack进行开发
webpack打包Hello World
weixin_33712881的博客
01-22 142
Webpack 开始 (1)mkdir webpack-demo (2)cd webpack-demo (3)npm init -y (上面解释了什么是-y) 工程目录 webpack-demo |-package.json |-package-lock.json 复制代码 //安装webpack npm install --save-dev webpack 复制代码 然后我们创建以下结构...
webpack--简单入门(1)
minixu的博客
07-20 3058
1.介绍 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
动手写webpack配置--1.学会安装运行(helloworld)
fengsh998的专栏
03-01 530
基于Webpack4.x + npm6.5 + node v10.10.0 + vscode环境. 项目名webpackDemo 开始步骤:找个路径新建个文件夹命名为webpackDemo,记得千万不要命名为webpack,因为这会和包冲突。 打开终端.或使用vscode打开webpackDemo 文件夹。新建一个终端. 1. cd 到 webpackDemo. 2. npm init ...
webpack 使用入门
feeihong的博客
09-30 166
webpack是一个模块化打包工具，可以把你的js文件，还有样式资源打包成一个整体。 先来看一个简单实例。（前提条件是 安装 nodejs  、npm ，ide工具 webstorm） 使用webstorm创建一个空项目：Webpack-HelloWorld    terminal下输入 npm init 为项目添加package.json 按照提示建立package.json文件。...
webpack安装
最新发布
xtcbql的博客
09-27 270
webpack安装
React+Webpack+ES6从环境搭建到HelloWorld
热门推荐
pcaxb的专栏
08-15 2万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ React是一个Facebook和Instagram用来创建用户界面的JavaScript库,是现在最热门的前端框架。Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过
webpack 3 入门指南：从零开始构建项目
4. **实现helloworld**：通过一个简单的例子，让读者实践Webpack的基本用法，将"Hello, World!"代码打包。 5. **webpack的配置文件webpack.config.js**：深入解析配置文件的结构和常用选项，如如何设置入口和输出...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值