本文主要从最新的 webpack4 入手, 慢慢的学习 webpack 的相关知识点, 进行汇总
第一次轻轻的接触
webpack 官网地址
GitHub 地址
使用 webpack 前提条件
环境准备
node, 使用官方最新版本即可, 由于 webpack 这里使用的是 4, 不再支持 node v4 一下的版本, 所以 node 需要安装 V4 + 的版本,
这是因为新的 webpack 和附属插件使用了 es6 的语法, v4 版本对 es6 不是很到位, 所以, 就不伺候了
本地安装
最新的 webpack 版本是: v4.43.0
要安装最新版本或特定版本, 请运行以下命令之一:
- // 这里需要安装 webpack-cli, 官方给出 webpack4 以上版本需要使用到 `webpack-cli`
- cnpm install --save-dev webpack webpack-cli //yarn add -D webpack webpack-cli
- cnpm install --save-dev webpack@<version>
当你在本地安装 webpack 后, 你能够从 node_modules/.bin/webpack 访问它的 bin 版本.
使用./node_modules/.bin/webpack 运行即可
由于还需要访问 node_modules, 这里我们使用 Linux 命令指定别名进行运行 webpack
alias webpack="node_modules/.bin/webpack"
Windows 的话可以暂时放到环境变量中
全局安装
以下的 NPM 安装方式, 将使 webpack 在全局环境下可用:
cnpm install --global webpack
不推荐全局安装 webpack. 这会将你项目中的 webpack 锁定到指定版本, 并且在使用不同的 webpack 版本的项目中, 可能会导致构建失败.
跑一个小例子感受一下
src/index.JS
- import bar from './bar';
- bar();
src/bar.JS
- export default function bar() {
- //
- }
webpack.config.JS
- const path = require('path');
- module.exports = {
- entry: './src/index.js',
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: 'bundle.js'
- }
- };
page.html
- <!doctype HTML>
- <HTML>
- <head>
- ...
- </head>
- <body>
- ...
- <script src="dist/bundle.js">
- </script>
- </body>
- </HTML>
然后在命令行运行 webpack 就会创建 bundle.JS.
- 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/
官方教程
来源: http://www.jianshu.com/p/f0aa74286599