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

2023-09-13 22:20:05 147

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

Webpack简介

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

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

模块系统的演进

这是最原始的JavaScript文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在window 对象中，

不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如YUI 库。

这种原始的加载方式暴露了一些显而易见的弊端：

全局作用域下容易造成变量冲突
文件只能按照
创建entry.js
```
//entry.js:在页面中打印出一句话
document.write('Itworks.')
```
然后编译entry.js并打包到bundle.js文件中
```
//使用npm命令
webpackentry.jsbundle.js
```
使用模块

1.创建模块module.js,在内部导出内容
```
module.exports='Itworksfrommodule.js'
```
2.在entry.js中使用自定义的模块
```
//entry.js
document.write('Itworks.')
document.write(require('./module.js'))//添加模块
```
加载css模块

1.安装css-loader
```
npminstallcss-loaderstyle-loader--save-dev
```
2.创建css文件
```
//style.css
body{background:yellow;}
```
3.修改entry.js：
```
require("!style-loader!css-loader!./style.css")//载入style.css
document.write('Itworks.')
document.write(require('./module.js'))
```
创建配置文件webpack.config.js

1.创建文件
```
varwebpack=require('webpack')

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.插件安装
```
//添加注释的插件
npminstall--save-devbannerplugin
```
2.配置文件的书写
```
varwebpack=require('webpack')

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:[
//添加注释的插件
newwebpack.BannerPlugin('Thisfileiscreatedbyzhaoda')
]
}
}
```
3.运行webpack
```
//可以在bundle.js的头部看到注释信息
/*!Thisfileiscreatedbyzhaoda*/
```
开发环境

webpack

--progress:显示编译的进度

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

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

12.4.7.1.webpack-dev-server

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

1.安装包
```
npminstallwebpack-dev-server-g--save-dev
```
2.启动服务

实时监控页面并自动刷新
```
webpack-dev-server--progress--colors
```
自动编译

1.安装插件
```
npminstall--save-devhtml-webpack-plugin
```
2.在配置文件中导入包
```
varhtmlWebpackPlugin=require('html-webpack-plugin')
```
3.在配置文件中使用插件
```
plugins:[
//添加注释的插件
newwebpack.BannerPlugin('Thisfileiscreatedbyzhaoda'),
//自动编译
newhtmlWebpackPlugin({
title:"index",
filename:'index.html',//在内存中生成的网页的名称
template:'./index.html'//生成网页名称的依据
})
]
```
4.运行项目
```
webpack--save-dev
```
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐