一、webpack的基本概念
webpack是一个用于现代JavaScript应用程序的静态模块打包工具；webpack会在内部从一个或多个入口构建一个依赖图（dependency graph），在项目中所需的每一个模块合成以后或多个bundles；bundles均为静态资源用于展示内容
依赖图：每当一个文件依赖另一个文件时，webpack都会将文件视为直接存在依赖关系，这使得webpack可以获得非代码资源（图片、web字体），并将它们作为依赖提供给应用程序
创新互联公司企业建站,10余年网站建设经验，专注于网站建设技术，精于网页设计，有多年建站和网站代运营经验，设计师为客户打造网络企业风格，提供周到的建站售前咨询和贴心的售后服务。对于
网站设计制作、成都网站设计中不同领域进行深入了解和探索，创新互联在网站建设中充分了解客户行业的需求，以灵动的思维在网页中充分展现，通过对客户行业精准市场调研，为客户提供的解决方案。二、 webpack的配置
1、入口entry
指示webpack使用哪个模块来作为构建依赖图的开始；进入入口起点后webpack会找出有哪些模块和库是入口起点依赖的（直接或间接）
默认值：./src/index.js
在webpack.config.js文档中指定入口：
用法1：
entry: string | [string]缺点：扩展或调整配置的灵活性不大；“webpack 配置的可扩展” 是指，这些配置可以重复使用，并且可以与其他配置组合使用
//单个入口
module.exports = {entry: './src/file.js'
}
//多个入口,将一个文件路径数组传递给 entry 属性
module.exports = {entry: ['./src/file.js','./src/file2.js']
}
用法2：对象语法
entry: {string | [string] } | {}module.exports = {entry: {app: './src/app.js',
adminApp: './src/adminApp.js'
}
}
描述入口对象的属性：
- dependOn：当前入口所依赖的入口；它们必须在该入口被加载前加载
- filename：指定要输出的文件名称
- import：启动时需加载的模块
- library：为当前 entry 构建一个 library
- runtime： 运行时 chunk 的名字；设为 false 可以避免一个新的运行时 chunk
- publicPath：当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址
module.exports = {entry: {a2: 'dependingfile.js',
b2: { dependOn: 'a2',
import: './src/app.js',
},
},
};
Tips：通过插件生成入口时，可以传递空对象 {} 给 entry
2、出口output
通过配置output选项，告知webpack如何向硬盘写入编译文件；
note：可以存在多个entry起点，但只能指定一个output配置
用法：设置为一个对象，配置filename
module.exports = {output: {filename: 'bundle.js',
path: __dirname + '/dist'
},
};
多个入口时，使用占位符来确保每个文件具有唯一的名称
module.exports = {mode: 'development', //告知 webpack 使用相应模式的内置优化 production | none(默认值)
entry: {app: './src/app.js',
search: './src/search.js',
},
output: { filename: '[name].js',
path: __dirname + '/dist',
},
};
// 写入到硬盘：./dist/app.js, ./dist/search.js
3、loader
loader用于对模块的源代码进行转换；loader可以使你在import或者load模块时预处理文件。loader可以将文件从不同的语言（如TS）转换成JavaScript语法或者将内联图像转换成dataURL；loader允许在JavaScript模块中import CSS文件
loader特性
- loader支持链式调用：链中的每个 loader 会将转换应用在已处理过的资源上；一组链式的 loader 将按照相反的顺序执行。 链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader；链中的最后一个 loader，返回 webpack 所期望的 JavaScript
- loader 可以是同步的，也可以是异步的
- loader 运行在 Node.js 中，并且能够执行任何操作
解析loader
loader 遵循标准 模块解析 规则。多数情况下，loader 将从模块路径加载（通常是从 npm install, node_modules 进行加载）
（1）css-loader： 告诉 webpack 加载 CSS 文件
- css-loader 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明。
- style-loader 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效。
//先安装相关的loader
npm install --save-dev css-loader style-loader
//webpack.config.js中配置
module.exports = {module:{rules:[
{ test: /\.css$/,
use: ['style-loader','css-loader'],
exclude: /node_module/, // 过滤，排除node_module目录下的文件
include: /demo/ // 指定匹配文件的范围
}
]
}
}
（2）less-loader：告诉 webpack 加载 less 文件
//先安装相关的loader
npm install --save-dev css-loader style-loader less-loader
//webpack.config.js中配置
module.exports = {module:{rules:[
{ test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
}
]
}
}
（3）ts-loader：将 TypeScript 转为 JavaScript
//先安装相关的loader
npm install --save-dev ts-loader
//webpack.config.js中配置
module.exports = {module:{rules:[
{ test: /\.ts$/,
use: 'ts-loader'
}
]
}
}
（4）file-loader：处理图片等资源；把识别出的资源模块，移动到指定的输出⽬目录，并且返回这个资源在输出目录的地址(字符串)
//先安装相关的loader
npm install --save-dev file-loader
//webpack.config.js中配置
module.exports = {module:{rules:[
{ test: /\.(png|jpe?g|gif)$/,
use: {loader:'file-loader',
name:'[name]_[hash].[ext]' //[ext] 源资源模块的后缀
outputPath: "./images",//打包后的存放位置
publicPath: './images',// 打包后文件的 url
}
}
]
}
}
（5）url-loader：可以处理file-loader能处理的所有资源；遇到图片格式的模块，可以选择性的把图片转成
base64格式的字符串，并打包到 js 中，对小体积的图片比较合适，大图片不合适
- url-loader封装了file-loader
- 文件大小小于limit参数时，url-loader将会把文件转为DataURL。
- 文件大小大于limit，url-loader会调用file-loader进行处理
//先安装相关的loader
npm install --save-dev url-loader
//webpack.config.js中配置
module.exports = {module:{rules:[
{ test: /\.(png|jpe?g|gif)$/,
use: {loader:'url-loader',
name:'[name]_[hash].[ext]' //[ext] 源资源模块的后缀
outputPath: "./images",//打包后的存放位置
publicPath: './images',// 打包后文件的 url
limit: 1024 * 30, //30KB以下的文件采用url-loader base64 格式
fallback: 'file-loader', //默认值是file-loader
}
}
]
}
}
（6）babel-loader：（核心）解析es6，将es6转化成es5，将react的jsx语法转化成浏览器可以认识的语言
Webpack 自带加载 js模块 的功能，但是只能做 js模块化 的打包，并不能转换 js 里面的代码，比如将 ES6 转换成 ES5；写代码时需要转换工具，即babel；babel 和 webpack 的结合需要一个 babel-loader
- babel-loader: 在 webpack 里面利用 babel 解析 ES6 的桥梁；
- @babel/core: babel 的核心模块；
- @babel/preset-env: babel预设，一组 babel 插件的组合，这样我们就不用自己安装插件了
//先安装相关的loader和插件
npm install --save-dev babel-loader
npm install --save-dev @babel/plugin-transform-runtime
//webpack.config.js中配置
module.exports = {module:{rules:[
{ test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {loader:'babel-loader',
options: { presets: ['@babel/preset-env'] // *引入预设
plugins: [
[
'@babel/plugin-transform-runtime' // *配置插件信息
]
]
}
}
}
]
}
}
4、plugins
loader被用于帮助webpack处理各种模块，而插件用于执行范围更广的任务；
插件是 webpack 的 支柱 功能。Webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上
webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且在整个编译生命周期都可以访问 compiler 对象
（1）html-webpack-plugin
作用：可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口；为html文件中引入外部资源， 如：script、link
//安装
npm install --save-dev html-webpack-plugin
//在webpack.config.js中配置
module.exports = {entry:'./src/app.js',,
output: {filename: '[name].js',
path: __dirname + '/dist',
},
module:{rules:[
{ test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
exclude: /node_modules/,
}
]
}
plugins: [
// 单入口写法
//new HtmlWebpackPlugin({ template: './index.html'})
//多入口
new HtmlWebpackPlugin({ template: './index.html',
filename: 'index.html',
chunks: ['index'],
minify: { removeComments: true,// 删除 index.html 中的注释
collapseWhitespace: true,// 删除 index.html 中的空格
removeAttributeQuotes: true// 删除各种 html 标签属性值的双引号
}
}),
]
}
（2）webpack-bundle-analyzer 打包文件分析工具
webpack-bundle-analyzer 插件提供了一种对打包体积文件大小的可视化展示，并支持简单的搜索，是当我们需要对打包成果进行详细控制的时候非常好用的一个参考对象
//安装
npm install webpack-bundle-analyzer -D
//在webpack.config.js中配置
const {BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {entry:'./src/app.js',,
output: {filename: '[name].js',
path: __dirname + '/dist',
},
module:{rules:[
{ test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
exclude: /node_modules/,
}
]
}
plugins: [
new HtmlWebpackPlugin({template: './index.html'}),
new BundleAnalyzerPlugin() //打包分析
]
}
5、webpack-dev-server ：用于快速开发应用程序
const path = require('path')
module.exports = {entry:...,
output:...,
module:{...}
devServer: {static: { directory: path.join(__dirname, 'public'),
},
progress: true, //浏览器中以百分比显示编译进度
port: 9000, //指定监听请求的端口号
server: 'http', //允许设置服务器和配置项（默认为 'http'） 'http' | 'https' | 'spdy' string object
proxy: { '/api': 'http://localhost:8080', //使用它来启用代理
},
compress: true, //启用 gzip compression
logging: 'info', //允许在浏览器中设置日志级别'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'
allowedHosts:['host.com','host2.com']
//'auto' | 'all' [string] 将允许访问开发服务器的服务列入白名单
//当设置为 'auto' 时，此配置项总是允许 localhost、 host 和 client.webSocketURL.hostname
},
};
热更新
模块热更新是webpack的一个功能，它使得代码修改后不刷新浏览器就可以更新；在应用过程中替换添加删除模块，无需重新加载整个页面，是高级版的自动刷新浏览器
优点：只更新变更内容，节省开发时间，调整样式更快速，几乎相当于在浏览器中更改样式
实现：
借助webpack.HotModuleReplacementPlugin()，devServer开启hot
//在webpack.config.js中配置
{ devServer: {progress:true,// 进度条
port: 9000, //指定监听请求的端口号
hotOnly:true,// 页面构建失败不刷新页面
hot: true, // 热重载
open: true, // 自定打开浏览器
proxy:{ '/api':'http:localhost:8080'
}
}
}
三、 使用webpack搭建react项目
- 前提：node npm已安装； 控制台 node -v； npm -v 查看版本
- 创建项目文件夹 初始化
在想要搭建项目的位置建一个项目根目录，然后启动控制台，并调到新建的项目的根目录文件夹下，控制台中输入：npm init -y
回车 -->根目录中会出现一个package.json的文件
- 安装依赖包
npm install webpack webpack-cli -D
npm install react react-dom -S
安装解析ES6和JSX语法的Babel
npm install babel-core babel-loader@7 babel-preset-env babel-preset-react -D
安装本地启动服务的webpack-dev-server和解析解析html的插件html-webpack-plugin
npm install webpack-dev-server html-webpack-plugin -D
回车 -->根目录中会出现node_modules文件夹；package.json文件中在devDependencies模块下会有对应的webpack和webpack-cli及版本
5. 在根目录下创建src文件夹和index.html文件，并在src文件下新建index.js文件
index.html文件：
这是title
index.js文件：
import React from 'react'
import ReactDom, {render } from 'react-dom'
import App from './app.js'
ReactDom.render(, document.getElementById('root')
)
- 创建webpack.config.js配置文件
在根目录下创建一个webpack.config.js文件，使用到的依赖包使用npm install或者yarn add 安装
"use strict";
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {mode: "development", //生产环境
target:'web',
entry:'./src/index.js',
output:{path: path.resolve(__dirname, './public'),
filename:'bundle.js'
},
// loader
module:{rules:[
{test: /\.js|jsx$/,
// exclude: /node_modules/,
use:{loader: 'babel-loader', //目前浏览器对ES6的标准支持不全，所以我们需要把ES6转换成ES5
options: {//传入loader的参数
presets: ["@babel/env", "@babel/react"]
}
}
},
{test: /\.less$/,
use:['style-loader','css-loader','less-loader']
},
{test: /\.css$/,
use:['style-loader','css-loader']
},
{test:/\.(png|svg|jpg|gif)$/,
use: [{loader: 'url-loader',
options: {limit: 1024 * 30, //30KB以下的文件采用url-loader
fallback: 'file-loader', //否则采用file-loader，默认值是file-loader
outputPath: 'images' //图片输出路径,相当于output.path
}
}]
},
{test: /\.(eot|ttf|woff|svg)$/,
use: [{loader: "url-loader",
options: {limit: 1024 * 30,
fallback: 'file-loader',
outputPath: 'fonts'
}
}]
}
]
},
// plugin
plugins:[
new HtmlWebpackPlugin({//使用html-webpack-plugin 自动生成HTML，并引入相应文件
filename: path.join(__dirname,'index.html'),
template:'index.html',
inject:'body',
hash:false,
minify:{collapseWhitespace: true
}
}),
new webpack.DefinePlugin({// 定义变量
NODE_ENV: JSON.stringify('dev')
})
],
devServer: {//progress:true,// 进度条
port: 8080, // 本地服务器端口号
//hotOnly:false,// 页面构建失败不刷新页面
hot: true, // 热重载
open: true, // 自定打开浏览器
proxy:{'/api':'http:localhost:8080'
}
}
}
- package.json文件里配置命令
"dev": "webpack-dev-server"
"build": "webpack --config webpack.config.js"
- 打包、启动项目
打包：npm run build
启动：npm run dev
你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧
网站栏目：webpack基本用法-创新互联
本文来源：
http://cdkjz.cn/article/djgpsc.html
