一、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. Event Loop、 宏任务和微任务

    本文将介绍我自己对JS Event Loop 和 宏任务.微任务的理解. 二话不说先上图: 接下来将会针对此图讲解什么是Event Loop 什么事宏任务和微任务(其实聪明的你们通过图大体也能了解的是 ...

  2. 需求：一个页面中需要用到多个字典数据。用于下拉选项，同时，需要将其保存为json格式。以便于key，value的相互转换。记录在实现过程中踩的坑

    本文涉及到的知识: Promise,all()的使用 js处理机制 reduce的用法 map的用法 同步异步 需求: 一个页面中需要用到多个字典数据.用于下拉选项,同时,需要将其保存为json格式. ...

  3. 【Ubuntu】Ubuntu18.04通过重装系统成功安装显卡驱动

    0. 前言 前面用了一天的时间来解决Ubuntu安装显卡驱动出现的用户输入密码登录后出现的紫屏.循环登录的问题,过程可阅读“[Ubuntu]Ubuntu系统启动过程中,输入用户名与密码后登录一直卡在紫 ...

  4. [256个管理学理论]004.鲶鱼效应（Catfish Effect）

    鲶鱼效应(Catfish Effect) 来自于大洋彼岸的让你看不懂的解释: 鲶鱼效应(Catfish Effect):鲶鱼在搅动小鱼生存环境的同时,也激活了小鱼的求生能力.鲶鱼效应是采取一种手段或措 ...

  5. git status 命令详解

    git status命令表示:文件,文件夹在工作区,暂存区的状态,下图就是文件,文件夹三种状态: Changes to be committed: (use "git restore --s ...

  6. 10 个提高效率的 Linux 命令别名

    在 Linux 环境下工作的工程师,一定会对那些繁琐的指令和参数命令行印象深刻吧.而且,可怕的不是繁琐,而是需要大量重复输入这些繁琐的命令. 在 Linux 下我们有个别名命令 alias ,可以将那 ...

  7. Eclipse中常用快捷键的使用

    1.补全代码的声明:alt + / 2.快速修复: ctrl + 1 3.批量导包:ctrl + shift + o 4.使用单行注释:ctrl + / 5.使用多行注释: ctrl + shift ...

  8. AUTOSAR-软件规范文档中的UML

    https://mp.weixin.qq.com/s/vm5vWNSpbNIYh25-LjJfYg   AUTOSAR软件规范文档中存在两种UML图: Sequence diagrams Config ...

  9. JSON.parse() 的实现

    目录 1. JSON.parse() 2. 前置知识 2.1 JSON格式中的数据类型 2.2 转义字符的处理 2.2 判断对象是否相等 2.3 寻找匹配的字符串 2.4 基础的递归思想 3. 实现流 ...

  10. 【HIVE】（3）联合查询join、时间戳函数、字符串函数

    数据 t_join1.txt 1,a,1 2,b,2 3,c,4 t_join2.txt 1,2a 2,2b 3,2c 建表.导入: create table t_join1(id int, name ...