webpack能做什么
webpack是一个静态模块打包工具，通过webpack，将模块化的代码整合好后展示在用户面前。
webpack的安装和运行
安装webpack、webpack-cli（可以本地安装，这样就不会破坏全局的webpack环境）
初始化package.json
npm init -y
npm i webpack webpack-cli --save-dev
新建webpack.config.js
// webpack.config.js中导出一个对象
// 所有的配置都在这个对象中
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack');
module.export = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/, // 根据打包过程中所遇到文件路径匹配是否使用这个 loader
use: [
'style-loader',
'css-loader'
] // 指定具体的 loader
}
]
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: 'Webpack Plugin Sample',
template: './index.html'
})
],
}
运行webpack
npx webpack
或者
npx webpack --mode=node //这样打包可以将打包的代码变为易于我们分析的样子
获得一个dist的文件夹，里面的bundle.js就是webpack打包之后的代码。
webpack的四大核心元素
webpack的四大核心元素：entry，output，loader和plugins
entry：它是webpack的打包入口；
output：它是文件打包好放置的位置。output 属性的值必须是一个对象，通过这个对象的 filename 指定输出文件的文件名称，path 指定输出的目录。如上面的配置，他最后的打包出口就在./dist/bundle.js
loader:loader可以将webpack不识别的资源，解析成javascript的代码。如scss，img等等这些资源，其实最后都是通过loader解析成了javascript代码然后打包到打包文件里面的。
plugins：plugins是为webpack插上了想象的翅膀，横向扩展了webpack的构建能力。如构建前清除原先的打包文件，将html单独拿出来。
搭建一个最简单的环境来看看webpack的打包代码
代码结构
└─ -configuation
├── src
│ ├── main.css
│ ├── heading.js
│ └── main.js
├── index.html
├── package.json
└── webpack.config.js ···················· Webpack 配置文件
内部内容
// ./src/heading.js
export default () => {
const element = document.createElement('h2')
element.textContent = 'Hello webpack'
element.addEventListener('click', () => alert('Hello webpack'))
return element
}
// ./src/index.js
import createHeading from './heading.js'
import "./main.css"
const heading = createHeading()
document.body.append(heading)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack - 快速上手</title>
</head>
<body>
<script type="module" src="src/index.js"></script>
</body>
</html>
执行运行命令 npx webpack --mode=none ，这个命令在执行的过程中，Webpack 会自动从 src/index.js 文件开始打包，然后根据代码中的模块导入操作，自动将所有用到的模块代码打包到一起。打包之后就能看到生成了一个dist的文件，里面的bundle.js就是打包好的文件。
