Webpack 4 构建大型项目实践 / 起步

栏目: 编程工具 · 发布时间: 5年前

内容简介:Webpack 是一个值得注意的是,Webpack 只能解析 Javascript 文件,处理其他类型文件需要各自的 loader / plugin准备安装 Webpack 之前请确认你已安装 Nodejs 最新稳定版本,过旧版本可能会缺少 Webpack 需要的包。

Webpack 是一个 Javascript 应用程序的 静态模块打包器 ,它会读取 Javascript 文件所需依赖,并把他们打包到一个或多个目标文件。

值得注意的是,Webpack 只能解析 Javascript 文件,处理其他类型文件需要各自的 loader / plugin

安装

准备安装 Webpack 之前请确认你已安装 Nodejs 最新稳定版本,过旧版本可能会缺少 Webpack 需要的包。

yarn global add webpack
复制代码

如果需要在命令行中使用 webpack 命令,webpack 4+ 版本还需要安装 webpack-cli ,如使用时未安装它会提醒你安装。

yarn global add webpack-cli
复制代码

全局使用命令前还需要把 webpack.cmd 所在目录(yarn bin)添加到环境变量,使用 yarn global bin 查看该目录具体路径

命令行打包和配置

  • 新建 src.js 文件

    function counter() {
    if (!counter.count) counter.count = 0
      counter.count++
    }
    
    counter()
    
    console.log(counter.count)
    复制代码
  • 打包 src.js 并把打包结果写入到同目录下的 dist.js

    webpack src.js -o dist.js --mode="development"
    复制代码

    -o dist.js 指定生成文件的的路径和文件名,它可以拆分为 --output-path="./" --output-filename="dist.js"

    --mode="development" 指定开发环境,打包后的代码不压缩

    事实上像这样单文件的打包 Webpack 并不能做什么神奇的事,我们可以在 dist.js 中看到,打包生成代码由两部分组成: __webpack_require__ 函数和 eval 执行 src.js 源码。

由于实际使用时 webpack 配置比较复杂,在命令行中极难阅读且不能满足所有需求,这里就不再继续展开,后文的重点也将放在如何修改配置文件以应对不同需求,更多命令行配置见参考文档“命令行接口”。

使用配置文件

为 webpack 指定配置文件有两种方式:

  1. --config 指定配置文件, webpack --config webpack.config.js
  2. 使用 Webpack Node.js API ,在 Node.js 代码中调用 webpack 函数

下方的例子我们使用第一种方式,实际项目中第二种方式会更常见,因为可以自定义打包的信息展示(比如等待动画、日志),后文我也会讲到。

  • 新建 webpack.config.js 文件

    const path = require('path')
    
    module.exports = {
      mode: 'development',
      entry: './src.js',
      output: {
        filename: 'dist.js',
        path: path.resolve(__dirname, './')
      }
    }
    复制代码
  • 打包 src.js 并把打包结果写入到同目录下的 dist.js

    webpack --config webpack.config.js
    复制代码

    可以看到,打包结果和上方一样。

    Webpack 默认配置文件是当前目录的 webpack.config.js ,所以上面的命令可以简化为 webpack


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP 6与MySQL 5基础教程

PHP 6与MySQL 5基础教程

(美)厄尔曼 / 陈宗斌 等 / 人民邮电出版社 / 2008-11-1 / 65.00元

本书是一部经典的入门级著作,采用基于任务的方法来讲授PHP和MySQL,使用大量图片指导读者深入学习语言,并向读者展示了如何构造动态Web站点。书中用简洁、直观的步骤和讲解提供了学习任务和概念的最快方式。通过学习本书,读者可以快速、高效地掌握PHP和MySQL,成为一位构建Web站点的高手。 本书适合初中级Web应用开发和设计人员阅读。 本书是讲述PHP和MySQL技术的畅销书,以深入......一起来看看 《PHP 6与MySQL 5基础教程》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换