Web前端 -- Webpack

一、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的更多相关文章

web前端学习路线与书籍推荐
什么是web前端? 在以前,通俗的讲是网页制作,在现在,哼哼,可以参考这篇文章 http://tieba.baidu.com/p/4817153404 那么如果高效优雅的学习web呢? 注:以下纯属个 ...
web前端面试试题总结---其他
其他问题原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式知道什么是singleton, factory, strategy ...
如何自学成为一个WEB前端
WEB前端是做什么的? 那些什么高大上的介绍作者就略过了,简单来说就是做网页的,我们上网浏览的网站界面就是WEB前端工程师做的. 在互联网迅速发展的近几年,你上网冲浪的时候是不是感觉WEB网站越来越漂 ...
一张图告诉你移动Web前端所有技术（工程化、预编译、自动化）
你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa 跨终端技术:HTML5.CSS 3.JavaScript ...
Web前端性能优化——如何有效提升静态文件的加载速度
WeTest 导读此文总结了笔者在Web静态资源方面的一些优化经验. 一.如何优化用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页 ...
能自学成为WEB前端工程师吗？
自学是大家学习一门it技术的时候,都会首先考虑的一种学习方式,web前端开发学习也是一样,但是自学web前端也是让大家充满疑问的一种学习方自学是大家学习一门it技术的时候,都会首先考虑的一种学习方式 ...
web前端学习就这9个阶段，你属于哪个阶段？
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
2018年Web前端自学路线
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Web前端入门的自学路线新手入门前端,需要学习的基础内容有很多,如下. ...
Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

随机推荐

protected和private的区别
1. protected和private在没有继承关系的类A和类B之间其作用都可以视为式一样的--表示私有--每个类中的protected字段/属性都不能被访问到: 2. 当类与类之间存在继承关系时候 ...
PowerDesigner使用教程（二）
在PowerDesigner使用教程(一)中已经介绍了基本用法,下面介绍一些使用技巧. 1. 生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路 ...
Fragment简介及使用
概述 Fragment是 Android 3.0(API 11)引入的一种设计,用于大屏幕的设备. Fragment依托于Activity,受宿主Activity生命周期的影响.但它也有自己的生命周期 ...
[SD心灵鸡汤]006.每月一则 - 2015.10
1. 贫不足羞,可羞是贫而无志. 2. 艺术的大道上荆棘丛生,这也是好事,常人望而却步,只有意志坚强的人例外. 3. 古今中外,凡成就事业,对人类有作为的无一不是脚踏实地.艰苦攀登的结果. 4. 理想 ...
java方式实现归并排序
一.基本思想归并排序是建立在归并操作上的一种排序算法,该算法是采用分治法的一个典型应用.具体操作如下:所谓的分治就是分而治之,以一分为二的原则,先把序列平均分解成二个左右子序列,然后递归左右二个子序 ...
一篇文章，全面掌握Git
版本控制版本控制就是记录项目文件的历史变化.它为我们查阅日志,回退,协作等方面提供了有力的帮助. 版本控制一般分为集中化版本控制和分布式版本控制. 集中化主要的版本数据都保存服务端. 分布式版本数据 ...
CVE-2017-9993 FFMpeg漏洞利用
漏洞原理: 更改连接直接发送请求,造成ssrf 漏洞利用: 脚本地址:https://github.com/neex/ffmpeg-avi-m3u-xbin 用法: 生成一个读取/etc/passwd ...
Rocket - devices - TLError
https://mp.weixin.qq.com/s/s_6qPkT2zwdqYLw5iK7_8g 简单介绍TLError的实现. 1. 继承自DevNullDevice TLError继承自DevN ...
跨域解决方案 - JSONP
目录 1. 定义 2. JSONP 解决跨域 3. 应用场景 4. 代码演示 1. 定义在HTML 中, script 标签有两个个性质: script 标签可以不受同源策略的限制去访问服务器资源, ...
蓝桥杯算法训练 P0505（Java解法）
一个整数n的阶乘可以写成n!,它表示从1到n这n个整数的乘积.阶乘的增长速度非常快,例如,13!就已经比较大了,已经无法存放在一个整型变量中:而35!就更大了,它已经无法存放在一个浮点型变量中.因此, ...