本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
首先需要安装NodeJS，官网下载即可
npm init -y
安装webpack webpack-cli
npm install webpack webpack-cli -D
新建 webpack.config.js
入口 （entry）
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
module.exports = {
entry: './path/to/my/entry/file.js'
};
多个入口
entry: [
'./src/polyfills.js',
'./src/index.js'
]
或者
entry: {
mian: './src/polyfills.js',
cc:'./src/index.js'
}
可以命名打包文件名字
出口(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.[hash:6].js'，
publicPath: '/' //通常是CDN地址
}
};
打包多个文件 name对应entry的key
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '.[name][hash:6].js'，
publicPath: '/' //通常是CDN地址
}
};
模式
通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
module.exports = {
mode: 'production'
};
插件(plugins)
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
安装
npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html', //打包后的文件名
minify: {
removeAttributeQuotes: false, //是否删除属性的双引号
collapseWhitespace: false, //是否折叠空白
},
)
]
};
module.exports = config;
新建public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<% if(htmlWebpackPlugin.options.config.header) { %>
<link rel="stylesheet" type="text/css" href="//common/css/header.css">
<% } %>
<title><%= (htmlWebpackPlugin.options.config.title) %></title>
</head>
<body>
</body>
<% if(htmlWebpackPlugin.options.config.header) { %>
<script src="//common/header.min.js" type="text/javascript"></script>
<% } %>
</html>
config.js
//public/config.js 除了以下的配置之外，这里面还可以有许多其他配置，例如,pulicPath 的路径等等
module.exports = {
dev: {
template: {
title: '你好',
header: false,
footer: false
}
},
build: {
template: {
title: '你好你好你好',
header: true,
footer: false
}
}
}
webpack.config.js:
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development';
const config = require('./public/config')[isDev ? 'dev' : 'build'];
modue.exports = {
//...
mode: isDev ? 'development' : 'production'
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html', //打包后的文件名
config: config.template
})
]
}
安装
npm install webpack-dev-server -D
//webpack.config.js
module.exports = {
//...
devServer: {
port: '3000', //默认是8080
quiet: false, //默认不启用
inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
stats: "errors-only", //终端仅打印 error
overlay: false, //默认不启用
clientLogLevel: "silent", //日志等级
compress: true //是否启用 gzip 压缩
}
}
安装 cross-env
npm install --save-dev cross-env
package.json
{
"scripts": {
"dev": "cross-env NODE_ENV=development webpack",
"build": "cross-env NODE_ENV=production webpack"
},
}
然后我们运行 npm run dev 和 运行 npm run build ，对比下 dist/index.html ，可以看到 npm run build，生成的 index.html 文件中引入了对应的 css 和 js。并且对应的 title 内容也不一样。
devtool 中的一些设置，可以帮助我们将编译后的代码映射回原始源代码。不同的值会明显影响到构建和重新构建的速度。
//webpack.config.js
module.exports = {
devtool: 'cheap-module-eval-source-map' //开发环境下使用
}
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
处理样式文件
npm install style-loader less-loader css-loader postcss-loader autoprefixer less -D
//webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.(le|c)ss$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')({
"overrideBrowserslist": [
">0.25%",
"not dead"
]
})
]
}
}
}, 'less-loader'],
exclude: /node_modules/
}
]
}
}
注意：
loader 的执行顺序是从右向左执行的，也就是后面的 loader 先执行，上面 loader 的执行顺序为: less-loader ---> postcss-loader ---> css-loader ---> style-loader
处理图片（html图片）
安装
npm install url-loader -D
npm install file-loader -D
//webpack.config.js
module.exports = {
//...
modules: {
rules: [
{
test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10240, //10K
esModule: false,
name: '[name]_[hash:6].[ext]',
outputPath:'assets'
}
}
],
exclude: /node_modules/
}
]
}
}
处理html中的图片
npm install html-withimg-loader -D
但用了就不可以用ejd模板语法，可以不用
图片引用改为
<img src="<%= require('./img.jpg') %>"/>
将JS转义为低版本
将JS代码向低版本转换，我们需要使用 babel-loader。
安装
npm install babel-loader -D
npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
npm install @babel/runtime @babel/runtime-corejs3
//webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"],
plugins: [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
},
exclude: /node_modules/
}
]
}
}
打包前清空dist
npm install clean-webpack-plugin -D
//webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
//...
plugins: [
//不需要传参数喔，它可以找到 outputPath
new CleanWebpackPlugin()
]
}
网友评论