webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件
webpack 可以处理 js/css/图片、图标字体等单位
开发过程中存在于本地的 js/css/图片/图标字体等文件，就是静态的
动态的内容，webpack 没办法处理，只能处理静态的
使用步骤
- 初始化项目
- 安装需要的包
- 配置 webpack
- 打包并测试
初始化项目后，webpack的配置写在webpack.config.js文件里
loader
官方 loader: www.webpackjs.com/loaders/
webpack 本身只能处理 js, 不能处理 css 和图片 loader 可以让 webpack 去处理那些非 JS 文件的模块
babel-loader
babel 和 webpack 配合, 把 ES6 编译成 ES3, ES5 代码, 以提高兼容性
babel 负责编译, webapck 负责打包
babel-loader, 负责连通 babel 和 webpack, 真正起到编译作用的是 babel
安装bable
npm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0
新建 babel.config.json，配置 babel,
{
"presets": ["@babel/preset-env"]
}
安装 babel-loader npm install --save-dev babel-loader@8.1.0
使用bable-loader
module: {
定义规则, 使用数组的原因: 可能有很多的loader, 每个loader 都可以单独配置
rules: [
{
test: /\.js$/, // 正则表达式, 文件夹下的所有js文件, 都会查找到并编译
exclude: /node_modules/, // 排除某些文件夹, 里面的js不需要编译
loader: "babel-loader", // 使用的loader名称
},
],
},
增强 babel 编译功能
先安装npm install --save-dev core-js@3.6.5
安装好以后，在要打包的js中引入
import "core-js/stable";
修改 index.html, 在 IE 中测试兼容性
插件 plugins
loader 被用于帮助 webpack 处理各种模块，而插件则可以用于执行范围更广的任务
每个插件的功能都不同, 具体插件, 具体分析
HtmlWebpackPlugin
自动生成新的 html 文件, 包括已经编译好的 js 放在输出文件夹下, 将来上线只需要上传输出文件夹里面的文件即可
先安装npm install --save-dev html-webpack-plugin@4.3.0
在webpack中导入插件 `var HtmlWebpackPlugin = require("html-webpack-plugin
配置插件
// 配置插件
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
如果有多个入口文件js,并且需要生成多个html，每个html里面有自己对应的js,那么插件配置如下：
plugins: [
// 使用的时候，先实例化,
new HtmlWebpackPlugin({
// 生成的html文件使用的模板
template: "./index.html",
// 生成的html
filename:"index.html",
// 每个html里面对应的js
chunks:["index"],
//HtmlWebpackPluginf的其他配置
minify: {
// 删除 index.html 中的注释
removeComments: true,
// 删除 index.html 中的空格
collapseWhitespace: true,
// 删除各种 html 标签属性值的双引号
removeAttributeQuotes: true,
},
}),
new HtmlWebpackPlugin({
// 生成的html文件使用的模板
template: "./search.html",
// 生成的html
filename:"search.html",
chunks:["search"],
//HtmlWebpackPluginf的其他配置
minify: {
// 删除 index.html 中的注释
removeComments: true,
// 删除 index.html 中的空格
collapseWhitespace: true,
// 删除各种 html 标签属性值的双引号
removeAttributeQuotes: true,
},
}),
],
完整代码如下
// 配置webpack
const path = require("path")
// 插件安装好以后导入，HtmlWebpackPlugin用来在出口文件下自动生成新的 html 文件, 包括已经编译好的 js
// 放在输出文件夹下, 将来上线只需要上传输出文件夹里面的文件即可
var HtmlWebpackPlugin = require("html-webpack-plugin");
const { chunk } = require("lodash");
module.exports = {
// 模式设置,把打包后的静态压缩文件变成能看懂的开发模式下的代码
mode:"development",
// 入口文件，webpack从哪个文件入手进行打包
// entry:"./src/index.js",
// 也可以定义多入口
entry:{
index:"./src/index.js",
search:"./src/search.js",
},
// 出口文件，打包完成后的静态文件放哪里，打包好的文件可以直接在其他地方引入使用
output:{
// 路径必须是绝对路径，path.resolve用来拼接路径，这里用到了path,要提前引入
path:path.resolve(__dirname,"dist"),
// 单出口，用来生成打包后的js
// filename:"bundle.js",
// 如果是多入口，就要设置多出口来接收
filename:"./script/[name].js",
},
// webpack本身只可以打包js文件，使用loader来帮助webpack处理其他非js文件
module: {
// 定义规则, 使用数组的原因: 可能有很多的loader, 每个loader 都可以单独配置
rules: [
{
test: /\.js$/, // 正则表达式, 文件夹下的所有js文件, 都会查找到并编译
exclude: /node_modules/, // 排除某些文件夹, 里面的js不需要编译
loader: "babel-loader", // 使用的loader名称
},
],
},
// 配置插件
plugins: [
// 使用的时候，先实例化,
new HtmlWebpackPlugin({
// 生成的html文件使用的模板
template: "./index.html",
// 生成的html
filename:"index.html",
// 每个html里面对应的js
chunks:["index"],
minify: {
// 删除 index.html 中的注释
removeComments: true,
// 删除 index.html 中的空格
collapseWhitespace: true,
// 删除各种 html 标签属性值的双引号
removeAttributeQuotes: true,
},
}),
new HtmlWebpackPlugin({
// 生成的html文件使用的模板
template: "./search.html",
// 生成的html
filename:"search.html",
chunks:["search"],
minify: {
// 删除 index.html 中的注释
removeComments: true,
// 删除 index.html 中的空格
collapseWhitespace: true,
// 删除各种 html 标签属性值的双引号
removeAttributeQuotes: true,
},
}),
],
}
