webpack学习（一）：初步配置webpack

demo地址: https://github.com/Lkkkkkkg/webpack-demo

全局安装

npm install --global webpack // --global代表全局安装

本地安装

对于大多数项目, 我们建议本地安装, 这可以使我们在引入破坏式变更(breaking change)的依赖时, 更容易分别升级项目

npm install webpack // --global代表全局安装

开始搭建

先创建一个目录 demo01 , 初始化 npm , 再本地安装 webpack 和 webpack-cli (如果使用 webpack 4+ 版本, 你还需要安装 webpack-cli , webpack-cli 是用于在命令行中运行 webpack )

mkdir demo01 //创建一个目录demo01
cd demo01 //进入demo01
npm -init -y //初始化npm, -y代表参数全部默认
npm install webpack webpack-cli --save-dev //这里本地安装webpack和webpack-cli, --save-dev代表保存在package.json文件里

配置 webpack 目录结构

接下来将创建一个如下的文件目录

|- /dist //用于放打包后文件的文件夹
  |- bundle.js //出口文件
  |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
  |- index.js //入口文件
|- package.json
|- webpack.config.js //webpack配置文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-demo01</title>
</head>
<body>
<script src="bundle.js"></script>  //引用出口文件, 因为bundle.js是webpack打包出来的文件
</body>
</html>

index.js

import _ from 'lodash';

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

    element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法

    return element;
}

document.body.appendChild(component());

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

npm install --save lodash

使用 webpack 配置文件

webpack.config.js

const path = require('path'); //node自带的path模块

module.exports = {
    entry: './src/index.js', //入口文件配置
    output: { //出口文件配置
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

使用 webpack-cli 在命令行中运行 webpack

使用 webpack 命令打包, 如果是全局安装了webpack, 直接在终端输入webpack, 如果是本地则需要加上前缀目录 ./node_modules/.bin/webpack , 如果是 Node 8.2+ 版本, 可以输入 npx webpack, Node 8.2+ 提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件(./node_modules/.bin/webpack)

webpack// 全局安装的情况下
./node_modules/.bin/webpack //局部安装的情况下
npx webpack // Node 8.2+

打开index.html
在这里插入图片描述
webpack打包成功, 这里index.html引用的是bundle.js, 而js代码写在index.js里, 说明webpack将入口文件的js打包输出到了bundle.js, index.html可以引用到里面的js, 输出了来自index.js的内容

使用NPM脚本代替 webpack-cli 命令

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便(也就是在命令行输入npx webpack), 我们可以设置一个快捷方式, 在 package.json 添加一个 npm 脚本(npm script):
package.json

{
  "name": "demo05",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" //在这一行添加这个字段
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令, 意思就是npm帮忙运行webpack, npm会在自动在webpack加上目录前缀, 也就说相当于在命令行输入./node_modules/.bin/webpack

npm run build //相当于./node_modules/.bin/webpack