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


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

查看所有标签

猜你喜欢:

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

编码整洁之道

编码整洁之道

罗伯特·C.马丁 / 电子工业出版社 / 2012-8 / 59.00元

忍受各种不确定性及不间断的压力并能够获取成功的程序员有一个共通特征:他们都深度关注软件创建实践。他们都把软件看做一种工艺品。他们都是专家。在“鲍勃大叔”看来“专业”的程序员不仅应该具备专业的技能,更应该具备专业的态度,这也是本书阐述的核心。专业的态度包括如何用带着荣誉感、自尊、自豪来面对进行软件开发,如何做好并做得整洁,如何诚实地进行沟通和估算,如何透明并坦诚地面对困难做抉择,如何理解与专业知识相......一起来看看 《编码整洁之道》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

随机密码生成器
随机密码生成器

多种字符组合密码

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

UNIX 时间戳转换