初识webpack 4 | 易学教程

网上大多数是webpack 3的教程，这是自己按照webpack官网最新版，webpack 4 的简单构建过程，在此记录一下

webpack安装

首先要安装node，并选择最新的长期支持版本(LTS - Long Term Support)
nodejs官网下载

全局安装

npm install -g webpack

安装到项目目录,推荐安装到本项目

npm install --save-dev webpack

正式使用webpack前的准备

1、在终端中使用npm init命令可以自动创建这个package.json文件

 npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。
这时，在项目文件夹中，package.json文件已经就绪

2、安装Webpack，在本项目中安装webpack作为依赖

//如果是webpack 4 版本，需要安装webpack-cli
npm install webpack webpack-cli --save-dev
//先安装webpack,然后安装webpack-cli

3、创建项目目录

安装完后在原来的空文件夹中包括了packjson.json文件和node_modules文件夹，现在要创建新的内容，使其目录结构如下:

node_modules
src
- index.js
index.html
packjson.json

4、创建基础代码

在index.html文件中写基础的html页面

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

src/index.js

  function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
  }
  document.body.appendChild(component());

5、创建 dist 文件夹，里面是构建过程产生的最小化和优化后的输出目录

dist
- index.html

6、要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library

npm install --save lodash

在安装一个要打包到生产环境的安装包时，你应该使用 npm install --save，如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev。请在 npm 文档中查找更多信息。

7、在src/index.js中添加代码，如下

 import _ from 'lodash';

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

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

    return element;
  }

  document.body.appendChild(component());

8、现在，由于通过打包来合成脚本，我们必须更新 index.html 文件。因为现在是通过 import 引入 lodash，修改如下

 <!doctype html>
  <html>
   <head>
     <title>起步</title>
     <!--<script src="https://unpkg.com/lodash@4.16.6"></script>-->
   </head>
   <body>
    <!--<script src="./src/index.js"></script>-->
    <script src="main.js"></script>
   </body>
  </html>

开始使用webpack

在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件：

配置文件

在项目根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

const path = require('path');

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

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

为了更快捷地使用webpack构建，可以对packjson.json文件进行编辑

在scripts对象中添加"build": "webpack"

  {
    "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

如果你使用的是 npm 5，你可能还会在目录中看到一个 package-lock.json 文件

自此，就基本实现构建过程了

来源：https://www.cnblogs.com/YuanJ-un/p/9686685.html

标签

Webpack

脚本

lodash