一、Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

二、Webpack安装

1、全局安装
npm install -g webpack webpack-cli
2、安装后查看版本号
webpack -v

三、初始化项目

1、创建webpack文件夹

进入webpack目录，执行命令

npm init -y

2、创建src文件夹

3、src下创建common.js

exports.info = function(str) {

    document.write(str); //浏览器输出

}
4、src下创建utils.js
exports.add =function(a, b) {

    return a*b;

}
5、src下创建main.js
const common = require('./common.js')

const util = require('./utils.js')

//css文件引入

require('./style.css')

common.info('hello common '+util.add(1,2))

四、JS打包

1、webpack目录下创建配置文件webpack.config.js

以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js



const path = require("path"); //Node.js内置模块

module.exports = {

    entry: './src/main.js', //配置入口文件

    output: {

        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径

        filename: 'bundle.js' //输出文件

    }

}
2、命令行执行编译命令
webpack #有黄色警告

webpack --mode=development #没有警告

执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {

    //...,

    "dev": "webpack --mode=development"

 }

运行npm命令执行打包

npm run dev
3、webpack目录下创建index.html

引用bundle.js

<body>

    <script src="dist/bundle.js"></script>

</body>
4、浏览器中查看index.html

五、CSS打包

1、安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader
2、修改webpack.config.js
const path = require("path"); //Node.js内置模块

module.exports = {

    //...,

    output:{},

    module: {

        rules: [

            {

                test: /\.css$/,    //打包规则应用到以css结尾的文件上

                use: ['style-loader', 'css-loader']

            }

        ]

    }

}
3、在src文件夹创建style.css
body {

    background-color: green;

}
4、修改main.js

在第一行引入style.css

require('./style.css');

Web前端 -- Webpack的更多相关文章

  1. web前端学习路线与书籍推荐

    什么是web前端? 在以前,通俗的讲是网页制作,在现在,哼哼,可以参考这篇文章 http://tieba.baidu.com/p/4817153404 那么如果高效优雅的学习web呢? 注:以下纯属个 ...

  2. web前端面试试题总结---其他

    其他问题 原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式 知道什么是singleton, factory, strategy ...

  3. 如何自学成为一个WEB前端

    WEB前端是做什么的? 那些什么高大上的介绍作者就略过了,简单来说就是做网页的,我们上网浏览的网站界面就是WEB前端工程师做的. 在互联网迅速发展的近几年,你上网冲浪的时候是不是感觉WEB网站越来越漂 ...

  4. 一张图告诉你移动Web前端所有技术（工程化、预编译、自动化）

    你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa 跨终端技术:HTML5.CSS 3.JavaScript ...

  5. Web前端性能优化——如何有效提升静态文件的加载速度

    WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页 ...

  6. 能自学成为WEB前端工程师吗？

    自学是大家学习一门it技术的时候,都会首先考虑的一种学习方式,web前端开发学习也是一样,但是自学web前端也是让大家充满疑问的一种学习方 自学是大家学习一门it技术的时候,都会首先考虑的一种学习方式 ...

  7. web前端学习就这9个阶段，你属于哪个阶段？

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  8. 2018年Web前端自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Web前端入门的自学路线 新手入门前端,需要学习的基础内容有很多,如下. ...

  9. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

随机推荐

  1. 极客手中的利器Electron

    作为一个前端开发人员,你可能已经听说过Electron了,你知道VS Code是基于这个技术开发的.不但VS Code, 目前一些大热的软件:飞书.Slack.WhatsApp都是基于这个技术开发的. ...

  2. require.js与IDEA的配合

    本文主要讲述在html中使用requirejs时,如何让IDEA更加智能识别javascript的方法. 测试时的目录结构,一种典型的 thinkphp 的结构,同时,在 a.thml 中通过 req ...

  3. Shell概述1

    Shell概述1 脚本文件内容(vim ex2) #!/bin/bash #If no arguments,then listing the current directory. #Otherwise ...

  4. 移动端适配-rem（新）

    概念 对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 移动端像素 设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单 ...

  5. PAT 1036 Boys vs Girls (25分) 比大小而已

    题目 This time you are asked to tell the difference between the lowest grade of all the male students ...

  6. Rocket - debug - Example: Triggers

    https://mp.weixin.qq.com/s/zPNyrBOhsytkRrZTDTEvpw 介绍riscv-debug的使用实例:配置Triggers功能. 1. Trigger Trigge ...

  7. 跨域解决方案 - 跨域资源共享cors

    目录 1. cors 介绍 2. 原理 3. cors 解决跨域 4. 自定义HTTP 头部字段解决跨域 5. 代码演示 5. 参考链接 1. cors 介绍 cors 说的是一个机制,其实相当于一个 ...

  8. Linux （八）服务

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 1.服务的概念 操作系统中在后台持续运行的程序,本身并没有操作界面,需要通过端口号访问和操作.CentO ...

  9. ASP.NET关于书籍详情和删除的Demo（HttpHandler进行页面静态化[自动生成html网页]+Entity Framework通过类创建数据库+EF删查）

    这次的Demo如标题所示, 首先第一步EF创建数据库 创建两个类,一个是图书类,一个是图书类别的类 using System; using System.Collections.Generic; us ...

  10. Java实现 LeetCode 478 在圆内随机生成点

    478. 在圆内随机生成点 给定圆的半径和圆心的 x.y 坐标,写一个在圆中产生均匀随机点的函数 randPoint . 说明: 输入值和输出值都将是浮点数. 圆的半径和圆心的 x.y 坐标将作为参数 ...