webpack笔记-webpack初识与构建工具发展（一）

时间 2020-06-04

标签 webpack 笔记构建工具发展繁體版

原文原文链接

为何须要构建工具？

转换 ES6 语法
转换 JSX
CSS 前缀补全/预处理器
压缩混淆
图片压缩

前端构建演变之路

ant + YUI Tool
grunt
gulp、fis3
webpack、rollup、parcel

为什么选择 webpack?

社区态丰富
配置灵活和插件化扩展
官方更新迭代速度快

初识webpack，简单的例子入手

安装

先确保你已经安装了 Node

其中检查node是否安装成功，使用node -v；检查npm的版本使用npm -v。
建立一个新的项目来开始咱们的 webpack 之旅：javascript

mkdir webpack-custom
cd webpack-custom

使用 npm init （或者使用npm init-y表示默认配置都选择yes）来建立一个「package.json」文件用于管理项目版本和依赖，而后咱们使用 npm安装webpack:html

npm install webpack webpack-cli -D

webpack-cli 是使用 webpack 的命令行工具，在 4.x 版本以后再也不做为 webpack 的依赖了，咱们使用时须要单独安装这个工具。

检查是否安装成功：前端

mac系统：./node_modules/.bin/webpack -vjava

window系统：.node_modules.binwebpack -vnode

安装成功以后，咱们能够在项目的「package.json」文件中看到对应的 webpack 版本依赖：webpack

"devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }

构建

安装完成以后，咱们能够使用 ==npx webpack ==命令来运行项目内安装的 webpack。web

其中，咱们能够使用以下命令执行一些操做：npm

npx webpack --help:查看 webpack-cli 提供了哪些命令可用
npx webpack --version:查看咱们安装的版本
npx webpack:运行构建

咱们先添加两个简单的代码文件，「src/index.js」和「src/hello.js」，如代码：json

index.js代码：gulp

import { hello, log } from './hello.js';
log(hello);

hello.js代码：

export const hello = 'hello world';

export function log(message) {
  console.log(message);
}

咱们执行npx webpack会在src同级目录生成一个dist/main.js文件，这就是使用webpack构建的结果，固然构建咱们也能够使用以下命令执行：.\node_modules\.bin\webpack，咱们也能够npm script运行webpack,也便是把构建命令写到 package.json 的 scripts 中：

"scripts": {
    "build": "webpack"
  },

而后咱们就能够使用npm run build命令构建webpack了。

配置文件

接下来咱们尝试建立一个webpack的配置文件，在咱们项目的根目录下建立一个「webpack.config.js」的文件：

'use strict';
var path = require('path');
module.exports = {
    mode: 'development',  // 指定构建模式
    entry: './src/index.js', // 指定构建入口文件
    output: {
        path: path.join(__dirname,'dist'), // 指定构建生成文件所在路径
        filename: 'bundle.js' // 指定构建生成的文件名
    },
}

而后咱们执行npm run build，就会生成「dist/bundle.js」文件，这说明配置文件生效了。

本地开发

在平常开发中，咱们不可能每次修改一次代码就执行一次构建，咱们须要一个方便本地开发的工具，和 webpack配套的则是webpack-dev-server。一样的，咱们使用 npm 来安装：

npm install webpack-dev-server -D

一样地，咱们在「package.json」文件的scripts字段中添加一个启动开发服务器的命令，如：

"scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  }

这个时候咱们还须要一个「index.html」文件做为页面的基础，webpack 暂时没有能力来处理 html 文件（须要经过插件来处理），咱们先在 dist 目录下建立一个「index.html」文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>webpack-demo</title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
</html>

同时，在配置文件中添加指定开发服务器启动路径的配置：

devServer: {
    contentBase: path.resolve(__dirname, 'dist') // 开发服务器启动路径
  }

接着再执行 npm run serve，即可以成功启动 webpack-dev-server 了，默认使用的端口是 8080，用浏览器打开 http://localhost:8080/，即可以访问到咱们刚才建立的html文件了，打开控制台就能够看到前边的 js 代码打印出来的 hello world 了。