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. 【GNN】图神经网络小结

    图神经网络小结 图神经网络小结 图神经网络分类 GCN: 由谱方法到空域方法 GCN概述 GCN的输出机制 GCN的不同方法 基于谱方法的GCN 初始 切比雪夫K阶截断: ChebNet 一阶Cheb ...

  2. 2019.8中关村、OGeek（oppo）比赛

    中关村writeup https://mp.weixin.qq.com/s?__biz=MzU3MzczNDg1OQ==&mid=2247484106&idx=1&sn=62a ...

  3. 快速生成500W测试数据库

    快速生成500W测试数据库: 创建测试表: DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `id` int(10) NOT NULL AUTO_ ...

  4. Solr 4.4.0利用dataimporthandler导入本地pdf、word等文档

    1. 创建本地目录 $ mkdir /usr/local/contentplatform/solr/solr/core1/file1 $ ls -lh total 88M -rw-r--r-- tnu ...

  5. vmware中的虚拟linux配置多块网卡

    在使用vm上运行多个linux系统,来模拟LVS负载均衡实验中.需要在lvs服务器中设置两块网卡,发现可以在vm给虚拟机添加任意多个网卡. 方法: 不要启动Linux,在上面的菜单项中选择: “VM— ...

  6. gitlab 安装、配置

    gitlab 安装.配置 对于企业级的私有 git 仓库,gitlab 是个不错的选择. 今天就来说说 gitlab 的安装.配置. 系统配置建议:最低双核 4G 内存. 当前针对 gitlab 版本 ...

  7. Electric Charges CodeForces - 623C (二分答案)

    大意: 平面上n个点每个点坐标为(x,0)或(0,y), 求任意两点距离平方最大值的最小值. 二分答案, 转化为判定最大值是否<=e, 按$x$排序后, 因为固定左端点, $y$绝对值的最大值是 ...

  8. 02、CDF文件

    有了探针排布图像的基础,我们就可以更好地理解CDF文件了.假如每个探针的位置用一个坐标表示,以左上角为(0,0),那么整张芯片的坐标就如下图(行数n必须等于列数m,这里共有n*m个探针): 0,0 1 ...

  9. PhpStorm 2017.3-2018.2 汉化包

    JetBrains 系列软件汉化包 关键字: Android Studio 3.0-3.1.3 汉化包 CLion 2018.1-2018.2 汉化包 GoLand 2017.3.2-2018.2 汉 ...

  10. css的样式问题

    项目里面遇到一个布局: 然后侧边栏菜单的高度要随着内容的高度变化而变化:所以在这里贴一下代码:效果如下 <!DOCTYPE html> <html lang="en&quo ...