频道导航

详解webpack模块化管理和打包工具

2019-01-08 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了详解webpack模块化管理和打包工具，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本篇文章主要介绍了详解webpack模块化管理和打包工具，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Webpack简介

webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际

需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

模块系统的演进

创建entry.js

页面中打印出一句话 document.write('It works.')

然后编译 entry.js并打包到 bundle.js文件中

使用模块

1.创建模块module.js,在内部导出内容

2.在entry.js中使用自定义的模块

添加模块

加载css模块

1.安装css-loader

css-loader style-loader --save-dev

2.创建css文件

3.修改 entry.js：

css-loader!./style.css") // 载入 style.css document.write('It works.') document.write(require('./module.js'))

创建配置文件webpack.config.js

1.创建文件

module.exports = {
entry: './entry.js',output: {
path: __dirname,filename: 'bundle.js'
},module: {
loaders: [
//同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
{test: /.css$/,loader: 'style-loader!css-loader'}
]
}
}

2.修改 entry.js 中的 style.css 加载方式：require('./style.css')

3.运行webpack

在命令行页面直接输入webpack

插件使用

1.插件安装

添加注释的插件 npm install --save-devbannerplugin

2.配置文件的书写

module.exports = {
entry: './entry.js',output: {
path: __dirname,filename: 'bundle.js'
},module: {
loaders: [
//同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
{
test: /.css$/,loader: 'style-loader!css-loader'
}
],plugins: [
//添加注释的插件
new webpack.BannerPlugin('This file is created by zhaoda')
]
}
}

3.运行webpack

开发环境

webpack

--progress : 显示编译的进度

--colors ：　带颜色显示，美化输出

--watch　：　开启监视器，不用每次变化后都手动编译

12.4.7.1. webpack-dev-server

开启服务,以监听模式自动运行

1.安装包

2.启动服务

实时监控页面并自动刷新

自动编译

1.安装插件

2.在配置文件中导入包

3.在配置文件中使用插件

添加注释的插件 new webpack.BannerPlugin('This file is created by zhaoda'),//自动编译 new htmlWebpackPlugin({ title: "index",filename: 'index.html',//在内存中生成的网页的名称 template: './index.html' //生成网页名称的依据 }) ]

4.运行项目

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/js/32692.html

webpack webpack webpack 打包打包打包模块化模块化模块化打包

上一篇：JS装饰器函数用法总结下一篇：JavaScript获取用户所在城市及地理

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章