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. [BeiJingWc2008]Gate Of Babylon

    <基尔伽美修>是人类历史上第一部英雄史诗,两河流域最杰出的文学作品之一.作品讲述了基尔伽美修一生的传奇故事.在动画Fate/staynight中,基尔伽美修与亚瑟王等传说中的英雄人物一起出 ...

  2. 【神经网络与深度学习】Caffe训练执行时爆出的Check failed: registry.count(t ype) == 1 (0 vs. 1) Unknown layer type

    自己建立一个工程,希望调用libcaffe.lib ,各种配置好,也能成功编译,但是运行就会遇到报错 F0519 14:54:12.494139 14504 layer_factory.hpp:77] ...

  3. mongodb 数据库操作 -- 》常用命令

    首先需要下载数据库,安装后,找到bin目录,点开bin目录,复制当前路径配置到环境变量中 和bin的同级下,需要建立一个data/db文件夹,该文件夹并不会自动生成,必须手动设置   启动数据库  看 ...

  4. python map 的用法

    map的用法 ——.我们来分析map在python的源码 class map(object): """ map(func, *iterables) --> map ...

  5. IDEA下集成tomcat7插件将tomcat内嵌到web项目中

    新建一个maven web项目 修改pom.xml文件 <build> <plugins> <!-- 配置Tomcat插件: 就是本地部署,将tomcat 内嵌到 web ...

  6. WTF!! Vue数组splice方法无法正常工作

    当函数执行到this.agents.splice()时,我设置了断点.发现传参index是0,但是页面上的列表项对应的第一行数据没有被删除, WTF!!! 这是什么鬼!然后我打开Vue Devtool ...

  7. [Vue] vue的一些面试题

    1.v-model 的原理 v-model 是一个语法糖,它即可以支持原生表单元素,也可以支持自定义组件.v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件. text 和 text ...

  8. Input常用的输入框验证(正则)

    1.只是不能输入空格 <input type="text" οnkeyup="this.value=this.value.replace(/^ +| +$/g,'' ...

  9. symfony学习笔记——路由

    symfony的路由其实就是通过url映射到控制器的一个设置 _test:    path: /test/{type}/{page} methods: [GET]    defaults: {_con ...

  10. Matlab 快速多通道积分图计算函数

    所谓快速多通道积分图计算,其实就是 cumsum2D. 我写了一个比较快的版本(比 VLFeat 的快),用 mex 编译一下就能用了. 代码 #include <string.h> #i ...