webpack的⽣产模式与开发模式详情
⽂章⽬录
1.webpack简介
1.1 ~是什么
本质上，Webpack 是⼀个现代 JavaScript 应⽤程序的静态模块打包器(module bundler)。当 Webpack 处理应⽤程序时，它会递归地构建⼀个依赖关系图(Dependency Graph)，其中包含应⽤程序需要的每个模块，然后将所有这些模块打包成⼀个或多个bundle。
在webpack看来，前端的所有资源⽂件（js、css、img、json…）都会作为模块处理。然后会根据模块的依赖关系进⾏静态分析，打包⽣成对应的静态资源。
1.2 基本的五个概念
在学习之前我们必须先要搞明⽩webpack的五个基本核⼼概念：
entry：
⼝指⽰webpack以哪个⽂件为⼊⼝起点开始打包，分析构建内部的依赖图。
output：
输出指⽰ webpack打包后的资源bundles输出到哪⾥去，以及如何命名
Loader：
让webpack去处理⾮JavaScript资源的⽂件，⽐如css、img等，将他们可以处理成⼀个webpack可以识别的资源，可以理解成⼀个翻译的过程。（webpack⾃⾝只能理解json和js）
plugins：
插件可以⽤来执⾏更加⼴的任务，插件的范围包括打包优化和压缩
mode：
模式指⽰webpack使⽤相应模式的配置。
开发模式（development）：配置⽐较简单，能让代码本地调试运⾏的环境。
⽣产模式（production）：代码需要不断优化达到性能最好。能让代码优化上线运⾏的环境。
web浏览器在哪里打开都会⾃动启⽤⼀些插件，⽣产模式使⽤插件更多
1.3 安装
⾸先需要确定有node环境
接着全局下载webpack
npm i webpack webpack-cli -g
注意：在项⽬中安装还需要本地安装
2.webpack开发环境基本配置
2.1 简单使⽤webpack打包js⽂件
⾸先创建src、build⽬录，在src创建js⽂件，并写⼊es6的代码。
然后使⽤分别使⽤以下命令编译查看结果：
webpack ./src/index.js -o ./build/ --mode=development  //开发环境下
webpack ./src/index.js -o ./build/ --mode=production  //⽣产环境下
并且常识打包css⽂件，结果发现会报错，因此我们可以得出以下三个结论：
1. webpack可以处理js\json⽂件，但是不可以处理img\css等⽂件，要想处理需要使⽤Loader
2. ⽣产环境和开发环境都可以将ES6模块化编译成浏览器可以识别的代码
3. ⽣产可以将js代码压缩
2.fig.js⽂件
这时webpack的配置⽂件，⼀般与src⽂件同级
作⽤是只是webpack⼲什么⼲什么，怎样⼲，⼀般在执⾏webpack命令时，会加载⾥⾯的配置。因为前⾯说到构建⼯具是基于node环境的，因此我们这⾥的模块化采取common.js
下⾯是⼀个fig.js的模板：
const path=require('path');
// ⼊⼝起点
entry:'./src/index.js',
// 输出
output:{
// 输出⽂件名
filename:'built.js',
solve(__dirname,'build')
},
// loder配置
module:{
rules:[
/
/ 详细的loder配置
]
},
// plugins配置
pligins:{
// 详细的pligins配置
},
// 开发模式
mode:'development'
}
2.3 打包样式资源css/less/sass…
由上⽂知道我们打包除js/json以外⽂件需要添加loader操作
因此我们在处理样式⽂件时需要下载必须的两个插件： 'style-loader', 'css-loader'
因为less与sass⽂件最终都是要转为css⽂件的，如果打包这些⽂件在下载相应的loader即可。
// loder配置
module:{
rules:[
// 详细的loder配置
// css打包处理
{
// 匹配哪些⽂件
test:/\.css$/,
/
/ 使⽤哪些loader进⾏处理
use:[
'style-loader',
'css-loader'
]
},
// less打包处理
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
}
]
},
注意：
1. use数组中的loader执⾏顺序是从右向左，从上向下依次执⾏（顺序不可颠倒）
2. style-loader：创建style标签，将js中的样式资源插⼊进去，添加到head中使⽤
3. css-loader：将css⽂件变为common模块加载在js中
2.3 打包html资源
打包hmtl资源需要使⽤plugins插件来进⾏。
插件的使⽤流程与loader不同，顺序是下载、导⼊、使⽤。⽽loader是下载、使⽤
⾸先我们下载html-webpack-plugin插件。
然后导⼊：
const Htmlwebpackplugin =require('html-webpack-plugin');
接在在plugins数组中操作即可：
plugins:[
new Htmlwebpackplugin({
//复制其资源到build，并⾃动引⼊打包输出所有资源
template:'./src/index.html'
})
]
,
此插件的功能是默认在build⽂件夹中创建⼀个html⽂件，⾃动引⼊相应的css、js资源⽂件
2.4 打包图⽚资源
打包图⽚资源需要添加loader：url-loader，file-loader（url-loader的依赖包）
也可以设置option内容，优化图⽚格式，在范围内的图⽚压缩为base64格式减少服务器请求次数。
{
test:/\.(jpg|png|gif)$/,
loader:'url-loader',
options:{
limit:120*1024
}
},
{
test:/\.html$/,
loader:'html-loader'
}
html-loader是⽤来处理html⽂件的img图⽚（负责引⼊img，从⽽可以内url-loader进⾏处理）
2.5 打包其他资源
其他资源⼀般是指除js、css等常规资源等以外的资源。⽐如iconfont等。我们这⾥使⽤iconfont来举例说明
我们只需要引⼊url-loader在进⾏配置即可
// 打包其他资源
{
exclude:/\.(css|html|js)$/,
loader:'url-loader'
}
2.6 使⽤dev-server
webpack为我们提供了⽤于实时刷新⾃动编译的服务器。这个服务器的特点是不会有输出，只会在内存中编译打包，服务关闭，内存中的相应数据也会销毁。
这⾥的⽤法是先本地下载webpack-dev-server包
然后再fig.js 中进⾏配置。
devServer:{
// 项⽬构建后的路径
solve(__dirname,'build'),
// 启动gzip压缩
compress:true,
// 设置端⼝号
port:3000,
// 启动后是否⾃动打开浏览器
open:true
}
注意:webpack5.X以上版本启动服务器需要使⽤命令
npx webpack serve
2.7.开发环境的基本配置
其实开发环境的配置就是将我们前⾯所讲的打包各种资源全部结合起来。
需要注意的是开发环境配置是可以让代码运⾏的。
运⾏代码的指令：
webpack：打包输出到⽬标⽂件
npx webpack serve：只会在内存中编译打包
下⾯我们直接上配置⽂件的代码：
const path =require('path');
const path =require('path');
const Htmlwebpackplugin =require('html-webpack-plugin'); ports ={
entry:'./src/js/index.js',
output:{
filename:'js/built.js',
path: solve(__dirname,'build')
},
module:{
rules:[
// 打包css
{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
]
},
/
/ less打包处理
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
//打包图⽚资源
{
test:/\.(jpg|png|gif)$/,
loader:'url-loader',
options:{
limit:120*1024,
name:'[name].[ext]',
outputPath:'image'
}
},
{
test:/\.html$/,
loader:'html-loader',
},
// 打包其他资源
{
exclude:/\.(css|html|js)$/,
loader:'url-loader',
options:{
name:'[name].[ext]',
outputPath:'media'
}
}
]
},
plugins:[
new Htmlwebpackplugin({
template:'./src/index.html'
})
],
mode:'development',
// devserver
devServer:{
// 项⽬构建后的路径
solve(__dirname,'build'), // 启动gzip压缩
compress:true,
// 设置端⼝号

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。