本文主要从最新的webpack4入手,慢慢的学习webpack的相关知识点,进行汇总 第一次轻轻的接触 webpack官网地址github地址 最新的webpack版本是:v4.43.0 跑一个小例子感受一下 src/index.js src/bar.js webpack.config.js page.html 然后在命令行运行 webpack 就会创建 bundle.js。 官方教程> 使用webpack前提条件
环境准备
- `node`,使用官方最新版本即可,由于webpack这里使用的是4,不再支持node v4一下的版本,所以node需要安装V4+的版本,
这是因为新的webpack和附属插件使用了es6的语法,v4版本对es6不是很到位,所以,就不伺候了
本地安装
import bar from './bar';
bar();
export default function bar() {
//
}
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<script src="dist/bundle.js"></script>
</body>
</html>
Version: webpack 4.43.0
Time: 82ms
Built at: 2020/06/22 下午5:20:25
Asset Size Chunks Chunk Names
bundle.js 951 bytes 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/index.js + 1 modules 72 bytes {0} [built]
| ./src/index.js 32 bytes [built]
| ./src/bar.js 40 bytes [built]
//这里会报WARNING,是webpack4后新增了`development`、`production`和`none`环境变量的指定,既然官方推荐了我们可以加一下
//./node_modules/.bin/webpack --mode production
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/