概念
webpack是一个现代 JavaScript 应用程序的静态模块打包器
安装
前提条件
在开始之前，请确保安装了Node.js的最新版本使用Node.js 最新的长期支持版本
本地安装
安装最新版本执行命令
npm install --save-dev webpack或npm install --save-dev webpack@<version>
使用 webpack 4+ 版本，你还需要安装 CLI。
npm install --save-dev webpack-cli
全局安装
npm install --global webpack
起步
基本安装
初始化npm 然后 在本地安装 webpack，接着安装 webpack-cli
npm init -y
npm install webpack webpack-cli --save-dev
创建以下目录结构、文件和内容：
webpack-demo
package.json
dist
index.html
src
index.js
src/index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// lodash 在当前 script 中使用 import 引入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./main.js"></script>
</head>
<body>
</body>
</html>
package.json
{
"name": "webpackstart",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"lodash": "^4.17.21"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',//入口 默认
output: {
filename: 'main.js',//文件名字 默认
path: path.resolve(__dirname, 'dist'),//出口 默认
},
};
打包
执行npm run build命令 会以src/index.js作为入口起点，也会生成 dist/main.js作为输出。
管理资源
加载css
安装 style-loader 和 css-loader
npm install --save-dev style-loader css-loader
module:{
rules:[
{
test:/\.css$/i, //匹配已.css结尾的文件
use:['style-loader','css-loader']//模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。
}
]
}
加载less
安装 less 和 less-loader
npm install less less-loader --save-dev
module: {
rules: [
{
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
加载图片资源
使用内置的 Asset Modules
module:{
rules:[
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',//使用内置asset/resource模块加载
},
]
}
asset module type
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
使用 Babel 和 webpack 转译 JavaScript 文件。
安装
npm install -D babel-loader @babel/core @babel/preset-env
在rules加
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,//忽略文件夹
use: {
loader: 'babel-loader',
//使用options向loader传递数据
options: {
presets: ['@babel/preset-env']//配置多个presets
}
}
}
或者在rules加
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,//忽略文件夹
loader: 'babel-loader',
}
写一个babel配置文件
babel.config.js
module.exports = {
presets: ['@babel/preset-env']//配置多个presets
}
管理输出
设置htmlwebpackplugin
生成html模板
安装 npm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入plugin
使用
不用模板
plugins:[new HtmlWebpackPlugin({title:'管理输出'})]//数组
使用模板
new HtmlWebpackPlugin(
{title: '管理输出',
filename: 'assets/admin.html',//输出文件目录和名字
template: './src/public/index.html',//模板文件
})
const { DefinePlugin } = require('webpack') //定义变量在template中使用
const BASE_URL = "'js'"
new DefinePlugin({
BASE_URL
})
清理 /dist 文件夹
output: {
clean: true,//打包时清除dist文件
},
开发环境
使用source map
mode 设置为 'development'
mode:'development',//开发环境
为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps 功能，可以将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。
devtool: 'inline-source-map',
选择一个开发工具
webpack 提供几种可选方式，帮助你在代码发生变化后自动编译代码：
webpack's Watch Mode
webpack-dev-server
webpack-dev-middleware
你可以指示 webpack "watch" 依赖图中所有文件的更改。如果其中一个文件被更新，代码将被重新编译，所以你不必再去手动运行整个构建。
"watch": "webpack --watch",
唯一的缺点是，为了看到修改后的实际效果，你需要刷新浏览器。如果能够自动刷新浏览器就更好了，因此接下来我们会尝试通过 webpack-dev-server 实现此功能。
使用 webpack-dev-server
安装
npm install --save-dev webpack-dev-server
添加一个可以直接运行 dev server 的 script：
"start": "webpack serve --open",
常见配置
devServer: {
static: './dist/public',//从什么位置查找
port: 8888,//端口
hot: true,//启用热替换特性
compress: true,//开启gzip压缩
proxy: {//代理
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' },
},
},
},
使用vue
了解vue的版本
npm install vue --save 后
在node_modules\vue\dist中
vue(runtime).global(prod).js
runtime版本不包含compiler
prod版本会压缩源代码
vue(runtime).esm-browser(prod).js
通过原生esmodule使用
<script type="module" ></script>
vue(runtime)ems-bundler.js
用于webpack等构建工具
默认是vue.runtime.ems-bundler.js
要解析template 需要更改为vue.ems-bundler.js
vue.cjs(prod).js
服务端渲染使用
通过require()在nodejs中使用
使用.vue文件
安装npm install -D vue-loader vue-template-compiler
// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
webpack默认值
常用配置
webpack.config.js
const path = require('path');
module.exports = {
//...
//这些选项能设置模块如何被解析。webpack 提供合理的默认值，但是还是可能会修改一些解析的细节。
resolve: {
extensions: ['.js', '.json', '.wasm'],//添加查找后缀
//别名
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/'),
},
},
};
