webpack学习之路（一）

把学习webpack时的笔记贴上来以备不时之需，多摘自官方文档，阅读文档的时候中英文一起看的，中文文档有时比较生涩会加入自己的理解。

安装：

前提：

首先你要有个node环境（官方推荐LTS版本）。

本地安装：

npm install --save-dev webpack            //安装最新版本

npm install --save-dev webpack@<version>  //安装指定版本

如果你安装的是版本v4及之后，还需要安装webpack-cli：

npm install --save-dev webpack-cli

本地安装是官方推荐方法，因为利于项目的更新，并且webpack往往是通过一条或多条npm命令启动的，这些命令会在项目的本地node_modules目录下确认webpack是否安装。

当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。（这句话没懂...)

全局安装：

npm install --global webpack

最最新版本安装：

npm install webpack@beta
npm install webpack/webpack#<tagname/branchname>

这些最新体验版本有概率是有bug滴，不要用于生产环境，自己玩玩就好啦。

起步

来构建个最最最简单的项目～

1.创建项目目录、初始化项目并本地安装webpack、webpack-cli：

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

ps：npm init用来初始化生成一个新的 package.json 文件，会向用户提一系列问题，使用-y（代表yes）则跳过提问阶段直接生成一个新的 package.json 文件。

2.创建以下目录结构、文件和内容：

project

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() { let element = document.createElement('div'); // Lodash, currently included via a script, is required for this line to work element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());

index.html

<!doctype html> <html> <head> <title>Getting Started</title> <script src="https://unpkg.com/[email protected]"></script> </head> <body> <script src="./src/index.js"></script> </body> </html>

package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }

这样管理项目有以下一些问题：

*脚本与外部扩展之间的依赖关系不能明显到一眼就看出来；

*如果万一哪个依赖没有引入或者引入错误那程序就报错啦；

*如果有个依赖被引入了但是程序没有使用的话浏览器就必须下载这些不必要的代码。

3.我们调整一下目录结构，"source"中的代码是我们编辑和修改的代码，"distribution"代码是经过构建后压缩和优化的代码，最终将被浏览器加载。

project

  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

要在index.js中绑定lodash依赖，需要本地安装：

npm install --save lodash

安装到打包到生产环境的安装包时使用npm install --save，安装用于开发环境的安装包使用npm install --save-dev。

src/index.js

+ import _ from 'lodash';
+
  function component() {
    let element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

dist/index.html

  <!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/[email protected]"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

接下来执行npx webpack，它会把src/index.js作为入口，然后输出dist/main.js：

npx webpack

...
Built at: 13/06/2018 11:52:07
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

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/concepts/mode/

ps：这里的警告可以先不用管，后续会提。

4.webpack4可以无需任何配置开始使用，而大多数项目需要非常复杂的启动配置，因此webpack支持配置文件，这相比手动在终端输入大量命令高效地多：

project

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') } };

再次启动：

npx webpack --config webpack.config.js

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

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/concepts/mode/

如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。

5.考虑到用cli来运行本地webpack还是很不方便，因此可以设置一个快捷方式：

package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

现在就可以使用npm run build来代替npx命令，注意，使用 npm 的 scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm 包。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本（如果必要，每个 flag 都带有 --config 标志）：

npm run build

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

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/concepts/mode/.

ps：通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。

webpack学习之路（一）

猜你喜欢