webpack-第一个demo – wenbin_ouyang-唐朝资源网

1、概念

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

官方网站：

地址：

中文文档：

2、安装

全局安装

npm —

npm –save-dev -cli -g

本地安装

npm –save-dev

npm –save-dev@

如果使用4+版本，还需要安装cli：npm –save-dev -cli

3、最基本的使用方式

的作用：

图片[1]-webpack-第一个demo – wenbin_ouyang-唐朝资源网

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

2）能够处理 js 兼容性问题，并将浏览器无法识别的高级语法转换为浏览器可识别的低级语法

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

– 要使用该命令，需要全局安装

– 全局安装目录为 C:Usersoy\npm

-C:Usersoy\npm 目录添加到环境变量路径

4、第一个演示：

项目结构：

图片[2]-webpack-第一个demo – wenbin_ouyang-唐朝资源网

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

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

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

webpack-study-1

    |dist
    |src
        |index.html
        |main.js

第三步：全局安装，全局安装目录为C:Usersoy\npm

npm @3.6.0 –，将C:Usersoy\npm目录添加到环境变量路径

第 4 步：本地安装：npm –save（或 npm i -S）

第五步：

索引.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>

图片[5]-webpack-第一个demo – wenbin_ouyang-唐朝资源网

main.js

// 这是项目的入口js文件
// 导入jquery
//这是ES6中导入模块的语法
import $ from 'jquery';
// const $ = require('jquery');
$(function() {
    $('li:odd').css('backgroundColor','blue');
    $('li:even').css('backgroundColor','#eee');
});

第六步：在项目根目录下，执行命令 .srcmain.js .dist.js

图片[6]-webpack-第一个demo – wenbin_ouyang-唐朝资源网

第 7 步：index.html 参考.js

第 8 步：访问 index.html 页面

5、配置文件..js使用

在项目根目录新建..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'
    }
};

直接在控制台输入命令，会调用配置文件..js，并导入入口和出口，这样命令==>入口和出口

本站下载的源码均来自公开网络收集转发二次开发而来，若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，我们会及时删除，给您带来的不便，我们深表歉意。下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。

THE END