webpack 傻瓜式安装教程

在一个全英文目录下新建一个全英文的文件夹

以命名为webpack为例,进入该文件夹里面

shift+鼠标右键,点击在此处打开命令行

安装webpack:

npm install --save-dev webpack 

如果你使用的webpack 4+ 版本,还需安装cli:

npm install --save-dev webpack-cli

等待安装完成,输入以下命令:

webpack -v

代表webpack安装完成

 

接下来用一个demo来体验webpack

依然在webpack文件目录下shift+鼠标右键打开命令行

新建一个文件夹app:

mkdir app && cd app

npm init -y

npm install webpack webpack-cli --save-dev

此时app的目录结构:

新建一个index.html文件和一个src目录,里面新建一个index.js文件

webpack 傻瓜式安装教程_第1张图片

src/index.js

function component() {
  var element = document.createElement('div');

  // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html



  
    app
    
  
  
    
  

我们还需要调整 package.json 文件,以便确保我们安装包是私有的(private),并且移除 main 入口。这可以防止意外发布你的代码。

添加:   "private": true,
删去:   "main": "index.js",

package.json

 

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  }
}

创建一个 bundle 文件

首先,我们稍微调整下目录结构,将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来。“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录,最终将在浏览器中加载:

webpack根目录下创建一个dist文件夹,把index.html移动到dist文件夹下

要在 index.js 中打包 lodash 依赖,我们需要在本地安装 library:

npm install --save lodash

现在,在我们的脚本中 import lodash,须更改部分src/index.js文件

src/index.js

import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  // Lodash 引入以下 script 脚本
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

现在,由于通过打包来合成脚本,我们必须更新 index.html 文件。因为现在是通过 import 引入 lodash,所以将 lodash

执行 npx webpack,会将我们的脚本作为入口起点,然后 输出 为 main.js。Node 8.2+ 版本提供的 npx 命令,可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件(./node_modules/.bin/webpack):

npx webpack

在浏览器中打开 index.html,如果一切访问都正常,你应该能看到以下文本:'Hello webpack'。

你可能感兴趣的:(webpack,webpack,webpack安装教程,webpack入门,webpack实例)