webpack初体验


什么是webpack
简介

webpack是一个现代javaScript应用程序的静态模块打包器(module bunndler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle

打包

什么是打包:打包就是将浏览器不能识别别的代码通过编译变成浏览器所能识别的代码就是打包。

就我自己的理解:webpack就是将一大堆的编译环境通过npm安装后统一在webpack的配置文件中进行统一的配置

五个核心概念

Entry: 入口指示Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图
Output: 输出指 Webpack打包后的资源bundles输出到哪里去,以及如何命名
Loader: Loader让webpack能够去处理那些非javaScript文件(webpack自身只能理解javascript)
Plugins:插件可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等
Mode 模式指Webpack使用相应的模式的配置:有开发模式和生产模式

注意事项

webpack可以处理js/json,不能处理css/img等其他资源
生产环境和开发环境将ES6模块化编译成浏览器能识别的模块
生产环境比开发环境多一个压缩js代码

打包的执行命令

	//初始化项目
npm init
//下载webpack与webpack脚手架
npm i webpack webpack-cli -D
//打包
webpack

	//创建一个webpack.config.js文件并在其中配置
//require是node中的API,用来引入模块
//引入path是为了给输出的文件一个绝对路径
const {resolve} = require('path)
const HtmlWebpackPlugins = require('html-webpack-plugin)
module.exports = {
//webpack配置
//入口起点
entry: "./src/index.js",
//输出
output: {
//输出文件名
filename: "built.js",
//输出路径
//__dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname,"build")
},
//loader配置
module: {
rules: [
//详细loader配置
{
//匹配那些文件
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
//plugins的配置
plugins: [
//详细plugins的配置
new HtmlWebpackPlugins({
template: './src/index.html'
})
],
//模式
mode: 'development',//开发模式
//mode: 'prodction' //生产模式
]
//等写完配置项之后就可以执行webpack命令进行打包

loader

不同的文件必须配置不同的loader处理

test 配置项,指定匹配了哪些文件,使用正则表达式来进行匹配
use 配置项,指定使用那些loader进行处理

            {
//匹配哪些文件
test: /\.css$/,
//使用哪些loader进行处理
use: [
//use数组中loader执行顺序;从右到左,从下到上一次执行
//创建style标签,将js中的css样式资源插入进去,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},

plugins(插件)

一些需要使用插件来执行的功能可以现在npm中安装,然后使用require引入到配置文件中,之后就可以在plugins中配置了
如下:

    plugins: [
//plugins的配置
// html-webpack-plugin
//功能: 默认会创建一个空的HTML,自动引入打包输出的所有资源
//需求:需要有结构的HTML文件
new HtmlWebpackPlugins({
//复制'./src/index.html'文件,并自动一如打包输出的多有资源(JS/CSS)
template: './src/index.html'
})
],

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

webpack初体验

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » webpack初体验
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏