webpack-第一个demo

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 -global

　　本地安装
           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-1
    |dist
    |src
        |index.html
        |main.js

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

　　　　　　npm install [email protected] --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 入口出口

猜你喜欢