跟我一起打包我们的第一个应用

第一步安装webpack





接下来我们新建文件

//add-content.js

export default function(){

    document.write('hello world!')

}


//index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>myfirstewebpackdemo</title>

</head>

<body>

    <script src="./dist/bundle.js"></script>

</body>

</html>


//index.js

import addContent from './add-content'

document.write('My first webpack app <br/>')

addContent()

项目整个目录结构如下



接下来我们打包这个项目

使用命令很长很难记

npx webpack --entry=./index.js --output-filename=bundle.js --mode=development



我们会发现多出来dist文件夹



现在我们直接打开浏览器运行项目效果为



上面我们提到，打包的命令很难记很难记，现在我们可以使用npm script这个简化命令的方式去运行

我们修改package.json文件为

//package.json

{

  "name": "firstwebpackdemo",

  "version": "1.0.0",

  "description": "webpack01",

  "main": "index.js",

  "scripts": {

    "build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"

  },

  "keywords": [

    "webpack"

  ],

  "author": "jser_dimple",

  "license": "ISC",

  "devDependencies": {

    "webpack": "^4.39.1",

    "webpack-cli": "^3.3.6"

  }

}

scripts是npm提供的脚本命令功能，在这里我们可以直接使用由模块所添加的指令

修改add-content.js文件

//add-content.js

export default function(){

    document.write('i\m using npm scripts!')

}

重新打包项目，现在我就不需要那么复杂的命令了，只需要使用npm run build即可



运行项目效果为



我们分析项目目录，会发现这样是非常不合理的，项目对应的文件应该有专门的文件夹管理的



一般工程目录是放在源码src文件夹中的，输出的资源放在/dist文件夹中的

我们将index.js和add-content.js移动到src/js文件夹目录下

这个报错



后面了解到webpack默认的源代码的默认文件是src/index.js。我们只需要将index.js和add-content.js移动到src文件夹下

我们还需要修改package.json文件为

{

  "name": "firstwebpackdemo",

  "version": "1.0.0",

  "description": "webpack01",

  "main": "index.js",

  "scripts": {

    "build": "webpack --output-filename=bundle.js --mode=development"

  },

  "keywords": [

    "webpack"

  ],

  "author": "jser_dimple",

  "license": "ISC",

  "devDependencies": {

    "webpack": "^4.39.1",

    "webpack-cli": "^3.3.6"

  }

}

现在我们运行npm run build命令是成功的



放下我的dmeo地址：https://github.com/JserJser/dailyPush/tree/master/dayly7/firstWebpackDemo

本文学习自：《webpack实战入门，进阶与调优》

跟我一起学习webpack(一)的更多相关文章

  1. [译]开始学习webpack

    写在前面: 文章翻译自petehunt大神的petehunt/webpack-howto,作为学习webpack的开始.fork了一份,翻译后的在这里https://github.com/zjzhom ...

  2. 深入学习webpack（一）

    深入学习webpack(一) 模块化的相关库和工具已经很多了,包括require.js.sea.js和一些工程化工具webpack.gulp.grant.那么我们该如何选择呢? 其实,我们只需要掌握了 ...

  3. webpack4 学习 --- webpack和webpack-dev-server

    以前了解过webpack2, 所以对webpack 不是很陌生,就直接入主题吧.新建一个文件夹,就叫它webpack-tut吧.然后在文件中新建一个src 文件夹,存放我们的源文件,再在src 文件夹 ...

  4. 如何学习 Webpack

    webpack-howto Tip: 本文是 webpack-howto 的原文,我觉得这篇文章写得非常好,确实算是目前学习 webpack 入门的必读文章.直接收录之. 本教程的目标 这是一本教你如 ...

  5. 深入学习webpack（二）

    深入学习webpack(二) 在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要 ...

  6. 跟我一起学习webpack使用配置文件(二)

    接着跟我一起学习webpack(一)中的项目来,我们接下来使用配置文件 使用npx webpack -h 我们可以查看webpack的配置参数 从我们在package.json中添加的命令来看,当项目 ...

  7. 学习webpack基础笔记01

    学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...

  8. vue第二单元(webpack的配置-学习webpack的常用配置)

    第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...

  9. 零基础学习webpack打包管理

    这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二.在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个 ...

  10. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

随机推荐

  1. JS的十大经典算法

    冒泡排序(Bubble Sort) 冒泡排序须知: 作为最简单的排序算法之一,冒泡排序给我的感觉就像Abandon在单词书里出现的感觉一样,每次都在第一页第一位,所以最熟悉...冒泡排序还有一种优化算 ...

  2. canvas插入图片设置背景，渐变

    ##在canvas中插入图片(需要image对象) 1.canvas操作图片时,必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 ima ...

  3. [JZOJ6271] 2019.8.4【NOIP提高组A】锻造

    题目 题目大意 武器的每个级别有固定的两种属性\(b_i\)和\(c_i\) 可以用\(a\)的代价得到一把\(0\)级的武器. 可以将\(x\)级武器和\(y=\max(x-1,0)\)级武器融合锻 ...

  4. js 过滤非法字符

    demo = 'zhang#@$san'; reg=/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im; if(reg.test(demo)){ t ...

  5. .net Framework 中的四种计时器

    在Framework中存在着4种定时器:其中分为两类, 多线程计时器 1:System.Threading.Timer 2:System.Timers.Timer 特殊目的的单线程计时器: 1:Sys ...

  6. 微信小程序（mpvue框架） 购物车

    效果图: 说明:全选/全不选, 1.数据: products:[{checked:true,code:"4",echecked:false,hasPromotions:true,i ...

  7. SecureCRT 64位 破解版和安装，以及解决乱码问题

    链接:https://pan.baidu.com/s/1q1DEmohK7ISNJ7UbJkN3jw 提取码:yea3 复制这段内容后打开百度网盘手机App,操作更方便哦 securecrt 破解版是 ...

  8. Shutdown- Linux必学的60个命令

    1.作用 shutdown命令的作用是关闭计算机,它的使用权限是超级用户. 2.格式 shutdown [-h][-i][-k][-m][-t] 3.重要参数 -t:在改变到其它运行级别之前,告诉in ...

  9. JS规则 给变量取个名字(变量命名) 必须以字母、下划线或美元符号开头；区分大小写；不允许使用JS关键字或保留字

    给变量取个名字(变量命名) 我们为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字). 我们赶快给变量取个好名字吧!变量名字可以任意取,只不过取名字要遵 ...

  10. CodeForces 258D Little Elephant and Broken Sorting(期望)

    CF258D Little Elephant and Broken Sorting 题意 题意翻译 有一个\(1\sim n\)的排列,会进行\(m\)次操作,操作为交换\(a,b\).每次操作都有\ ...