webpack初体验

简介: ●首先新建一个项目文件夹命名为WebPack2项目文件●用SubLime将其打开并在该文件夹中创建app.js、index.html和webpack.

●首先新建一个项目文件夹命名为WebPack2

img_5eb3ba0d1fe3557c848f6a857ac84ca9.png
项目文件

●用SubLime将其打开并在该文件夹中创建app.js、index.html和webpack.config.js(webpack配置文件)

webpack.config.js

module.exports={
    // 设置入口文件
    entry:'./app.js',
    // 设置编译输出后的文件名
    output:{
    path:__dirname,
    filename:'bundle.js'
    },
    mode:'development'
}
AI 代码解读

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>WebPack初体验</title>
    </head>
    <body>
        <!-- 这里是webpack.config.js里指定的输出文件 -->
        <script type="text/javascript" src="./bundle.js"></script>
    </body>
</html>
AI 代码解读

app.js

document.write('WebPack初体验');
AI 代码解读

接下来在该项目问价夹下打开命令行窗口用npm生成package.json

$ npm init --yes
AI 代码解读

package.json

{
  "name": "WebPack2",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
AI 代码解读

接下来用npm下载webpack(这里用cnpm(淘宝镜像)下载比较快)

$ cnpm install webpack
AI 代码解读

下载成功后在项目文件夹里出现node_modules文件夹

img_b83d6ac79e701766a390165c3dc0bb66.png
node_modules文件夹

这时在命令行输入

$ webpack ./app.js
AI 代码解读

成功后出现bundle.js文件

img_cdfc8f37bdfa116b83d65da27bf44cb8.png
bundle.js

将index.html用浏览器打开

img_3910e70070f538e3ffe53fb065aaac5d.png
最终效果
目录
打赏
0
0
0
0
6
分享
相关文章
webpack4-用之初体验,一起敲它十一遍
众所周知,webpack进入第4个大版本已经有2个月的时间了,而且webpack团队升级更新的速度也是非常的惊人
2776 0
Webpack 2 视频教程 004 - Webpack 初体验
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」。 Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的。
1082 0
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
深入了解Webpack:现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack:现代JavaScript应用的打包利器
手写一个简易bundler打包工具带你了解Webpack原理
该文章通过手写一个简易的打包工具bundler,帮助读者理解Webpack的工作原理,包括模块解析、依赖关系构建、转换源代码以及生成最终输出文件的整个流程。
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
846 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
10月前
|
webpack 打包多页面应用
webpack 打包多页面应用
115 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问