1、webpack概念

　　webpack是前端的一个项目构建工具，它是基于node.js开发出来的一个前端工具；借助webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

　　webpack官网：https://webpack.js.org

　　github地址：http://webpack.github.io　 
　　中文文档： https://www.webpackjs.com/

2、webpack安装

　　全局安装
            npm install webpack --global
            npm install --save-dev webpack-cli -g

　　本地安装
            npm install --save-dev webpack
            npm install --save-dev webpack@<version>
            如果你使用 webpack 4+ 版本，你还需要安装cli: npm install --save-dev webpack-cli

3、webpack最基本的使用方式

　　webpack的作用:

　　1）webpack能够处理js文件的相互依赖关系

　　2）webpack能够处理js的兼容问题，把高级的、浏览器不识别的语法，转为低级的、浏览器能识别的语法

　　语法：webpack 要打包的文件的路径 打包好的输出文件的路径

　　　　- 要使用webpack命令，需要全局安装

　　　　- 全局安装目录为C:\Users\oy\AppData\Roaming\npm

　　　　- C:\Users\oy\AppData\Roaming\npm目录添加到环境变量path

4、第一个demo:

　　项目结构：

　　

　　源代码写在在src目录，编译文件在dist目录。

　　第一步：创建项目根目录webpack-study-1

　　第二步：创建项目目录结构

webpack-study-

    |dist

    |src

        |index.html

        |main.js

　　第三步：webpack全局安装，全局安装目录为C:\Users\oy\AppData\Roaming\npm

　　　　　　npm install webpack@3.6.0 --global，把C:\Users\oy\AppData\Roaming\npm目录添加到环境变量path

　　第四步：本地安装jquery: npm install jquery --save(或npm i jquery -S)

　　第五步：

　　index.html

<!DOCTYPE html>

<html>

<head>

    <title>标题</title>

    <meta charset="utf-8">

    <script type="text/javascript" src="../dist/bundle.js"></script>

</head>

<body>

    <ul>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

    </ul>

</body>

</html>

　　main.js

// 这是项目的入口js文件

// 导入jquery

//这是ES6中导入模块的语法

import $ from 'jquery';

// const $ = require('jquery');

$(function() {

    $('li:odd').css('backgroundColor','blue');

    $('li:even').css('backgroundColor','#eee');

});

　　第六步：在项目根目录，执行命令 webpack .\src\main.js .\dist\bundle.js

　　第七步：index.html引用bundle.js
            <script type="text/javascript" src="../dist/bundle.js"></script>

　　第八步：访问index.html页面

5、配置文件webpack.config.js的使用

　　在项目根目录新建 webpack.config.js

var path = require('path');

// 通过node的模块操作，向外暴露一个配置对象

module.exports = {

    entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用webpack打包哪个文件

    output: {   // 出口

        path: path.join(__dirname, './dist'),

        filename: 'bundle.js'

    }

};

　　在控制台直接输入命令webpack，会调用配置文件webpack.config.js，导入入口和出口，使得 webpack命令 ==> webpack 入口 出口

webpack-第一个demo的更多相关文章

  1. webpack快速入门——webpack3.X 快速上手一个Demo

    1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...

  2. angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  3. vue环境的搭建与第一个demo

    参考两个博客 1 2 git.npm和淘宝镜像的安装过程过程省略了,直接开始webpack + vue-cli + 创建demo 首先,在磁盘创建一个文件夹,命名为vue-projects,里面再建一 ...

  4. typescript+webpack构建一个js库

    依赖说明 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 ...

  5. 初识nginx之第一个demo

    商城项目做了一个多月了,想到必须用到负载均衡,简单了解了一下nginx,首先分享第一个demo,五月份上线后,会继续分享一系列相关知识. 在nginx根目录下,用了一个园友的批处理文件nginx.ba ...

  6. springMvc的第一个demo

    1.下载jar包 http://repo.spring.io/libs-release-local/org/springframework/spring/4.2.3.RELEASE/ 2.下载源码 j ...

  7. Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）

    在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...

  8. 如何在WTL和MFC中使用duilib及如何静态使用duilib库！（初级讲解 附带一个Demo）

    关于duilib的历史,我也就不多说了,能看到这篇文章的人都是有一定了解才能找到这个的. 我直接说下对这个库的基本使用吧. 我个人对一些好技术都是比较感兴趣的. 因为个人原因 喜欢接触一个好技术. 所 ...

  9. 白盒测试之gtest第一个demo

    认识gtest工具后,关于它的使用,下面将用一个demo程序演示一下gtest的用法以及成果展示. 一.需要测试的C++代码: #include "myfunction.h" // ...

随机推荐

  1. html+css实现奥运五环(环环相扣)

    <!DOCTYPE html> <html> <head> <title>奥运五环</title> <style type=" ...

  2. 20191209 Linux就该这么学（1-3）

    1. 部署虚拟环境安装 Linux 系统 RPM 是为了简化安装的复杂度,而 Yum软件仓库是为了解决软件包之间的依赖关系. 2. 新手必须掌握的Linux命令 通常来讲,计算机硬件是由运算器.控制器 ...

  3. java 编码设计细节

    1.hibernate注解 @Validated({ APIGetsGroup.class })@NotBlank(message = "{cameraReceive.captureId.e ...

  4. python 并发编程 多进程 生产者消费者模型总结

    生产者消费者模型总结 生产者消费者模型什么时候用? 1.程序中有两类角色 一类负责生产数据(生产者) 一类负责处理数据(消费者) 2.引入生产者消费者模型为了解决的问题是 平衡生产者与消费者之间的速度 ...

  5. java方法形参是引用类型

    public void 方法名(Student s) 这里形参需要的是该类的对象或者子类对象(父类引用子类对象). 1.若为普通类:则可传入该类的实例对象即可,方法名(new Student()): ...

  6. HDU 1257 最少拦截系统 最长递增子序列

    HDU 1257 最少拦截系统 最长递增子序列 题意 这个题的意思是说给你\(n\)个数,让你找到他最长的并且递增的子序列\((LIS)\).这里和最长公共子序列一样\((LCS)\)一样,子序列只要 ...

  7. rebtree学习

    http://www.cnblogs.com/skywang12345/p/3245399.html http://www.cnblogs.com/skywang12345/p/3624177.htm ...

  8. PythonDay16

    第十六章模块 今日内容 自定义模块 time模块 datetime模块 rendom模块 自定义模块 # import 模块 例:import time# 导入的是time模块中所有的内容(变量,函数 ...

  9. php多域名单站点路由

    能够使多域名但是只有一个站点的小站,通过路由访问到各个指定目录 <?php //域名跳转路由 //默认跳转 $default = "http://www.stanwind.com/in ...

  10. sql server 平方根函数SQRT(x)

    --SQRT(x)返回非负数x的二次方根 示例:select  SQRT(9), SQRT(36); 结果:3    6