官网
\
\
分享内容
\
- 稍微入门的config
- loader的基本用法
- plugin的用法
- 开启一个web服务（webpack-dev-server）
- 实现一个vue或react的webpack配置
- 实现一个多页面的webpack
- 优化我们的webpack配置
- webpack的高级用法 实现ssr服务端渲染
- 基于ts来构建webpack
- webpack的实现原理
- webpack的核心（tapable）
- 实现一个webpack的loader和plugin
- webpack5改了啥
\
安装
\
/**
需要提前安装node.js，最低版本为8，webpack5升级为10
node.js安装完后，npm会自带
如果采用yarn，需要运行npm install yarn -g即可
*/
npm install webpack webpack-cli -D
yarn add webpack webpack-cli -D
\
入门
\
- 一个基本的webpack配置
\
创建一个webpack.config.js，然后写下内容，然后用npm init 初始一个package.json，scripts写入以下内容，然后执行npm run build即可，webpack就会在当前目录下生成一个dist文件夹，里面是你打包后的内容。
\
// index.js
console.log('hello world')
// webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
}
}
// package.json
"scripts": {
"build": "webpack"
},
\
上面就是一个入门级别的webpack配置，当我们执行npm run build的时候，webpack注册了一个命令，用于执行，会默认解析当前路径下的webpack.config.js，然后执行，并输出到dist目录。
