更新文章不容易,尤其是更新高质量的文章更加不易,因此为了节约时间,闲话就不多说了。关于webpack的介绍,webpack是用来干嘛的,这些基础概念性的东西,就不在此赘述,下面直接开始正题。

webpack的基本使用详解。

1.webpack的安装

npm install webpack --save-dev

步骤如下:

2.安装完成之后我们用编辑器打开项目文件,新建一个hello.js文件。

然后执行:webpack hello.js hello.bound.js的命令。

生成的结果文件:

然后我们在新建一个wolrd.js文件和一个style.css文件,并且通过require的形式在hello.js引用然后进行打包。

新建一个world.js文件内容如下:

在新建一个style.css文件,内容如下:

然后在hello.js中通过require进行引用

然后执行打包命令:

发现报错了,是因为引用css文件需要先安装css-loader和style-loader

因此我们先安装着两个loader

执行如下命令:

然后在css的引用路径前面加上style-loader!css-loader!

再执行打包命令:webpack hello.js hello.bound.js

打包成功了

接下来我们新建一个index.html文件,引用我们打包的hello.bound.js来检测打包后的效果:

浏览器打开index.html文件的效果如下:我们发现页面的背景变红了,js也执行了,样式文件被打包到了hello.bound.js中。在页面渲染中样式以style的形式插入到了页面中

关于webpack的命令行以及使用参数

我们可以通过输入webpack --help来查看

到此我们已经了解了webpack的基本使用。下一节将讲解如何通过搭建webpack的配置文件。

实例讲解webpack的基本使用第一篇的更多相关文章

  1. 实例讲解webpack的基本使用第二篇

    这一篇来讲解一下如何设置webpack的配置文件webpack.config.js 我们新建一个webpack-demo的项目文件夹,然后安装webpack 执行如下命令 在项目文件夹下,建一个dis ...

  2. 实例讲解webpack的基本使用第三篇

    这一篇来讲解一下webpack的htmlWebpackHtml插件的使用. 先来思考一个实际问题:我们现在在index.html引用的js文件是写死的.但是我们每次打包后的文件都是动态的,那么我们怎么 ...

  3. 实例讲解webpack的基本使用第四篇

    这一篇来讲解一下webpack的loader的使用,用webpack打包文件,css,img,icon等都需要下载安装对应的loader文件,并且写好配置项,才可以进行打包,废话不多说,直接开始实战. ...

  4. Eclipse插件开发 学习笔记 PDF 第一篇到第四篇 免分下载 开发基础 核心技术 高级进阶 综合实例

    <<Eclipse插件开发 学习笔记>>,本书由浅入深.有重点.有针对性地介绍了Eclipse插件开发技术,全书分为4篇共24章.第一篇介绍Eclipse平台界面开发的基础知识 ...

  5. 国内第一篇详细讲解hadoop2的automatic HA+Federation+Yarn配置的教程

    前言 hadoop是分布式系统,运行在linux之上,配置起来相对复杂.对于hadoop1,很多同学就因为不能搭建正确的运行环境,导致学习兴趣锐减.不过,我有免费的学习视频下载,请点击这里. hado ...

  6. 关于Webpack详述系列文章 (第一篇)

    WebPack官网地址(https://webpack-china.org/) 1. 什么是WebPack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript ...

  7. 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  8. 简单的抓取淘宝关键字信息、图片的Python爬虫|Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇)

    Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇) 淘宝改字段,Bugfix,查看https://github.com/hunterhug/taobaoscrapy.git 由于Gith ...

  9. 第一篇 SQL Server安全概述

    本篇文章是SQL Server安全系列的第一篇,详细内容请参考原文. Relational databases are used in an amazing variety of applicatio ...

随机推荐

  1. Java的HashMap实现原理整理总结

    通过Debug 探寻Java-HashMap 实现原理: 一个简单的例子,代码如下, 测试方法 main: public static void main(String[] args) { KeyOb ...

  2. java基础系列(三)---HashMap

    java基础系列(三)---HashMap java基础系列 java基础系列(一)---String.StringBuffer.StringBuilder java基础系列(二)---Integer ...

  3. jmeter系列------变量的提取

    为了保证脚本的移植性,需要把一些变量提取出来,变量主要分为2类 1.一类是公用变量(全局变量),包括:IP.port.附件路径.CSV路径等,通常是使用用户定义的变量 组件 2.另一类是测试变量一般作 ...

  4. Begin the new life as a coder

    今天刚刚开通博客园的博客频道,这里将成为自我成长点滴记录的土壤!从今天开始,从这篇博文开始,我将分享自己从一个fresher开始的成长经历.原与广大仁人志士共同在程序中共享快乐!我真是太高兴了 :D

  5. Express + Session 实现登录验证

    1. 写在前面 当我们登录了一个网站,在没有退出登录的情况下,我们关闭了这个网站 ,过一段时间,再次打开这个网站,依然还会是登录状态.这是因为,当我们登录了一个网站,服务器会保存我们的登录状态,直到我 ...

  6. union-find算法Java实现

    package practice; /*在一个全是点的图中,循环选择两点连通,之后判断两点是否在同一通路*/ public class Testmain { public static void ma ...

  7. SVG裁切和蒙版

    前面的话 本文将详细介绍SVG裁切和蒙版 裁剪 SVG中的<clipPath>的元素,专门用来定义剪裁路径.必须设置的属性是id属性,被引用时使用 下面是一个圆形 <svg heig ...

  8. python 从视频中提取图片,并保存在硬盘上

    使用python的moviepy库来提取视频中的图片,按照视频每帧一个图片的方式来保存. extract images from video, than save them to disk from ...

  9. outlook 无法搜索邮件的解决方法

    我的outlook版本是2007 SP3,英文版.一直有搜索不到邮件的问题,例如在搜索框输入发件人的名字,或者邮件中的词语,就是搜索不到邮件,即使那封邮件确实存在. 在网上搜索,Microsoft 的 ...

  10. 自制EIGRP配置实验大全

    EIGRP综合实验 本实验可能会有一两个出错的地方,希望大家进行实验测试后,可以指正!当然绝大部分都是正确滴! 实验A:基本配置 A.0)实验目的: 熟悉eigrp的基本配置 A.1)实验拓扑: A. ...