【webpack】一步步的看webpack-1

2021-01-20 本文已影响0人程序员佩奇

本文主要从最新的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/

官方教程

【webpack】一步步的看webpack-1

环境准备

本地安装

全局安装

猜你喜欢

热点阅读